5

Estou fazendo um projeto onde estou usando o border radius para fazer um menu vertical.
Gostaria que o Menu ficasse com a border radius reta, desta forma arredondada : inserir a descrição da imagem aqui

E atualmente está ficando desta forma:

.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>

Como faço para ficar reta?

6

1 Resposta 1

4

Não é com border-radius, pois radius = raio, ou seja essa propriedade cria um raio de curvatura nos vértices da div por isso fica arredondado.

Mas com um pseudo-elemento e skewX() vc consegue.

.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>

4
  • Vou estudar este código @hugocsl, muito obrigado !! perfeito
    – Sora
    4/07/2018 às 16:03
  • O que significa o ::after
    – Sora
    4/07/2018 às 16:03
  • @Sora então MUITO resumidamente um ::after é um pseudo-elemento, são elemento construídos no CSS, eles não são tags html, o assunto é um pouco extenso, mas não é difícil de entender. Vou te indicar um artigo que vale a pena parar 15min pra dar uma olhada, vai ser mais didático do que eu tentar explicar aqui no comentário rss, da uma olha aqui que vai abrir sua cabeça devmedia.com.br/css-conheca-os-pseudo-elementos/38183
    – hugocsl
    4/07/2018 às 16:20
  • Vou ler, obrigado !!
    – Sora
    4/07/2018 às 16:25

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .