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
0
Resp
1798
Visitas
Por alber hace 32 meses
Administrador online

Relaccionados

Para comentar Inicia sesión o Registrate