img - ¿Cómo construir un polígono especial(una forma de cometa) con HTML y CSS solamente?
img html (3)
Estoy trabajando en mi nuevo proyecto y en esto necesito algunas estructuras irregulares. Uno de ellos es:
Lo que logré fue:
.mainkite {
width: 200px;
height: 200px;
background: #f00;
transform: skew(180deg, 180deg) rotate(45deg);
position: relative;
margin: 0px auto;
margin-top: 50px;
overflow: hidden;
}
.midLine {
border: solid 1px #000;
transform: skew(180deg, 180deg) rotate(45deg);
position: absolute;
top: 99px;
width: 140%;
left: -41px;
}
<div class="mainkite">
<div class="midLine"></div>
</div>
¿Cómo puedo obtener el resto de la forma que deseo?
Con CSS:
Utilizando:
- solo HTML y CSS
- 2 elementos y 2 pseudo elementos
- border-radius y transforma para las líneas internas
- la técnica de borde para el triángulo inferior
.kite {
position: relative;
width: 200px; height: 200px;
background: #f00;
transform: rotate(45deg);
margin: 0px auto;
margin-top: 50px;
}
.kite:before, .kite:after {
content: '''';
position: absolute;
}
.kite:before {
top: 50%; left: -20.5%;
width: 141%;
margin-top:-1px;
border-top: 2px solid #000;
transform: rotate(45deg);
}
.kite:after {
top: 0; left: 0;
width: 198px; height: 198px;
border-top-left-radius: 100%;
border-left: 2px solid #000;
border-top: 2px solid #000;
}
.tail {
position: absolute;
top: 199px; left: 199px;
width:60px; height:60px;
overflow:hidden;
}
.tail:before{
content:'''';
display:block;
width:141%; height:100%;
background:#000;
transform-origin:0 100%;
transform:rotate(-45deg);
}
<div class="kite"><span class="tail"></span>
</div>
Con SVG
Otro enfoque que debe considerar es usar un SVG en línea . Como pareces estar haciendo un elemento gráfico, SVG puede ser más apropiado semánticamente y:
- ser fácilmente escalable
- código más corto
- mejor control sobre las formas y curvas
En el siguiente ejemplo, uso elementos de polilínea para hacer el cuadrado rojo, el triángulo negro inferior y la línea vertical. Para la línea circular, uso un elemento de ruta con un comando de curva de bezier cuadrático :
svg{display:block;width:400px;margin:0 auto;}
<svg viewbox="0 0 10 10">
<polyline fill="red" points="5 0 9 4 5 8 1 4" />
<polyline points="5 0 5.05 0.05 5.05 7.95 5 8 4.95 7.95 4.95 0.05" />
<path d="M1.05 4.05 Q5 1 8.95 4.05" fill="none" stroke-width="0.1" stroke="#000" />
<polyline points="5 8 6 9 4 9 " />
</svg>
Prima
Gracias a Harry por hacerme pensar esto un poco más y hacerme encontrar otro acercamiento de solo CSS con un div:
.kite {
position: relative;
width: 200px; height: 200px;
background: #f00;
transform: rotate(45deg);
margin: 0px auto;
margin-top: 50px;
}
.kite:before, .kite:after {
content: '''';
position: absolute;
}
.kite:before {
top: 50px; left: -41px;
width: 282px; height: 2px;
margin-top: -1px;
background: #000;
transform-origin: 141px 52px;
transform: rotate(45deg);
background-clip: content-box;
border-right: 50px solid #000;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.kite:after {
top: 0; left: 0;
width: 198px; height: 198px;
border-top-left-radius: 100%;
border-left: 2px solid #000;
border-top: 2px solid #000;
}
<div class="kite"></div>
Creé dos divs para Arc y Tail respectivamente. Envolví mainkite y tale en un div para colocar correctamente la cola ya que el desbordamiento de mainkite se configuró como hidden .
Puedes ver mi jsfiddle: https://jsfiddle.net/80qs2a4y/7/
Arc se crea simplemente agregando border-radius: 50%; y aumentar el ancho y la altura hasta el 200% .
Ref .: Crear triángulo usando SOLO CSS: https://css-tricks.com/snippets/css/css-triangle/
La respuesta dada por es maravillosa y recomendaría usar SVG para formas complejas por las mismas razones indicadas en su respuesta. Sin embargo, esta forma es razonablemente simple de crear con CSS y debajo hay otra variante para crear esto con solo un elemento.
La parte de la cola negra es un pseudo-elemento, mientras que la cometa roja es su box-shadow . La línea en el medio se crea usando un linear-gradient en el elemento primario y la cadena curva es el segundo pseudo.
He usado unidades de ventana gráfica para todas las partes para que la salida sea receptiva. Esto se debe a que las sombras de cuadro no pueden tomar valores de porcentaje y no pueden responder, a menos que se utilicen unidades de ventana.
.kite {
position: relative;
height: 25vw;
width: 25vw;
background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px));
overflow: hidden;
}
.kite:before {
position: absolute;
content: '''';
top: calc(84.5% + 1px); /* (15/25 * 1.414 is approximately 84.5% + 1px for correction */
left: 50%;
height: 15vw;
width: 15vw;
background: black;
transform-origin: left top;
transform: rotate(45deg);
box-shadow: -15vw -15vw 0px red; /* the x and y are same as height and width */
z-index: -1;
}
.kite:after {
position: absolute;
content: '''';
top: calc(0% - 2px);
left: calc(50% + 1px);
width: calc(15vw - 2px);
height: calc(15vw - 1px);
border-top-left-radius: 100%;
border-left: 2px solid #000;
border-top: 2px solid #000;
transform-origin: left top;
transform: rotate(45deg);
}
<div class="kite"></div>