Olá gelera.
como fazer as bordas retangulares ilustradas nessas imagem?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde, Flávio! Tudo certinho? =)
O primeiro retângulo, com todas as bordas arredondadas, basta você aplicar a propriedade border-radius, assim:
div {
border-radius: 10px;
}Como não especificamos quais bordas queremos o arredondamento, teremos o resultado em todas! =)
Na outra opção, com a borda do topo e à esquerda, e a de baixo à direita, basta fazermos o seguinte:
div {
border-radius: 10px 0;
}Com isso, o CSS será aplicado aos pares. Na primeira e terceira borda, teremos o arredondamento de 10px. Na segunda e quarta, não... Mas qual é a primeira, segunda,...?
A primeira é aquela que está no canto superior esquerdo, depois disso, basta percorremos as bordas em sentido horário. =)
As outras duas eu não me lembro como faz... Eu vou procurando aqui e, se achar eu lhe informo, ok? =)
Fábio
O de cima e da direita tem que usar :before e :after. Eu manjo pouco, mas é mais menos assim, segue HTML e CSS:
<div id="ret">
</div>
#ret {
position:relative;
background-color: black;
width: 100px;
height: 70px;
border: 1px solid #000;
display: inline-block;
}
#ret:after {
position:absolute;
left:-30px;
top:-30px;
content:'';
border-top: 70px solid white;
border-right: 70px solid transparent;
}
#ret:before {
position:absolute;
left: 80px;
top: -10px;
content:'';
border-right: 70px solid white;
border-bottom: 70px solid transparent;
}O de baixo e da direita tem que fazer a borda cobrir metade do retângulo, segue HTML e CSS:
<div id="triangle-bottomleft">
</div>
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 60px solid red;
border-right: 100px solid transparent;
}Segue codepen que eu tava brincando: http://codepen.io/anon/pen/MJxLoB