Como hacer un triangulo con bordes redondeados en css3
En el siguiente ejemplo podemos ver como hacer un triangulo con bordes redondeados utilizando solo css3 de una manera muy sencilla.
Captura:
Código:
Captura:
Código:
<style type="text/css"> .triangulo-redondeado, .triangulo-redondeado:before, .triangulo-redondeado:after { position: relative; display:block; width: 100px; height: 100px; background: #000; border-top-right-radius: 20px; } .triangulo-redondeado { margin: 60px auto 0 auto; transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangulo-redondeado:before, .triangulo-redondeado:after { content: ''; position: absolute; } .triangulo-redondeado:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangulo-redondeado:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } </style> <div class="triangulo-redondeado"></div>Ver mas ejemplos
0
Puntos
Puntos
8731
Visitas
Visitas
0
Resp
Resp
Por alber hace 106 meses
Administrador