Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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:
<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
8731
Visitas
0
Resp
Por alber hace 106 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate