CSS: Border Radius

Question

CSS: Border Radius

Navigation

#1 by (5 votes)

6

I'm doing a project where I'm using border radius to make a vertical menu. I would like the Menu to have the radius border straight, in this rounded way:

Andit'scurrentlygettingthisway:

.teste{
	height:12%;
	width:65%;
	background-color: rgb(56, 66, 65);
	opacity:0.5;
	position:absolute;
	margin-left:30%;
    border: 2px solid red;
	border-bottom-left-radius: 250px 170px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Vertical</title>
</head>
<body>
<div id="teste" class="teste"> </div>
</body>
</html>

How do I stay straight?

html5 css

asked by anonymous 04.07.2018 / 16:33

1 answer

How to optimize the removal of rows in an array? Sorting HashMap by value and assigning a value using java 8

score 5 · Accepted Answer

It is not with border-radius , because radius = radius , ie this property creates a radius of curvature in the vertices of div so it is rounded.

But with a pseudo-elemento and skewX () you can.

.teste{
	height:12%;
	width:65%;
	background-color: rgb(56, 66, 65);
    color:#ddd;
	position:absolute;
	margin-left:30%;
    padding-left: 50px; /* mesma largura que o elemento after */
    border: 2px solid red;
    border-top: none;
    border-right: none;
    box-sizing:border-box;
}
.teste::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 50px;
    background-color: rgb(56, 66, 65);
    top: 0px;
    left: -25px;
    border: 2px solid red;
    border-top: none;
    border-right: none;
    transform: skewX(25deg);
}

    <div id="teste" class="teste"></div>