CSS: Border Radius

Question

CSS: Border Radius

Asked 5 years, 12 months ago

Viewed 261 times

5

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

And it’s actually getting this way:

.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 get straight?

Good morning! I found this site here, already to get an idea: http://www.howtocreate.co.uk/tutorials/css/slopes

– lcs01

2018/07/04 at 14:50
And the top as it is?

– Wallace Maxters

2018/07/04 at 14:53
Currently I’m trying to make only the div as the shape of the image, instead of getting half rounded, get bridge-sharp (like a sword)

– Sora

2018/07/04 at 14:56
Take a look at this: https://answall.com/questions/109200/criar-bot%C3%A3o-with-edge-octagonal-using-only-html-e-css

– Wallace Maxters

2018/07/04 at 14:56
@Sora I am trying to apply the principle of this question in your answer: What it means / in border-Radius

– Wallace Maxters

2018/07/04 at 14:59
3

Possible duplicate of Create octagonal border button using html and css only

– Bacco

2018/07/04 at 15:14
2

Possible duplicate of How to Make Tilt Button? and Creation of diagonal div

– Guilherme Nascimento

2018/12/14 at 14:03

Show 2 more comments

1 answer

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-07-04T15:02:50+00:00

Is not with border-radius, for Radius = radius, that is, this property creates a radius of curvature at the vertices of the div so it gets 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>