CSS para hacer pequeñas banderas y pequeñas flechas
El cuadro de efectos es el siguiente:
Pequeñas representaciones de bandera
Imagen de efecto de flecha pequeña
Efecto de bandera pequeña
El siguiente es el código de implementación específico:
<div class="container">
<div class="flag"></div>
</div>
.container {
width: 500px;
height: 500px;
background-color: lime;
position: relative;
}
.flag {
position: absolute;
left: 150px;
top: 100px;
height: 50px;
border-width: 100px;
border-style: solid;
border-color: red red rgba(0, 0, 0, 0) red
}
La implementación del método anterior es establecer el ancho de un div en 0, confiar en el ancho del borde para mostrar el efecto visual y luego configurar la esquina del borde para que sea transparente a través del atributo de color del borde (rgba () El último parámetro puede establecer la transparencia )
Efecto de flecha pequeña
El siguiente es el código de implementación específico:
<div class="container">
<div class="left">
图片
</div>
<div class="right">
介绍文本
</div>
</div>
.left {
float: left;
width: 60%;
height: 100%;
background-color: mediumblue;
font-size: 50px;
font-weight: bold;
text-align: center;
}
.right {
float: right;
width: 40%;
height: 100%;
background-color: goldenrod;
font-size: 50px;
font-weight: bold;
text-align: center;
position: relative;
}
.right::after {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: rgba(0, 0, 0, 0) goldenrod rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
position: absolute;
left: -40px;
top: 100px;
}
La clave para lograr este efecto también es el color del borde.En comparación con el ejemplo anterior, esta vez se implementó usando pseudo posicionamiento :: después de usar el posicionamiento relativo. Establezca tres de las cuatro esquinas en transparente (las posiciones correspondientes del parámetro de color del borde son: arriba, derecha, abajo, izquierda). Nota: Después de crearlo, debe moverlo hacia la izquierda o hacia la derecha una distancia, y la distancia de traslación es el doble del ancho del borde establecido.