html 伪元素原理,带有伪元素的Html / Css三角形

问题在于使用边界.您可以查看此链接

How do CSS triangles work?,您将了解边框的工作原理以及获得此输出的原因.

另一种解决方案是使用旋转和边框,如下所示：

.box {

border: 1px solid;

margin: 50px;

height: 50px;

position:relative;

background: #f2f2f5;

}

.box:before {

content: "";

position: absolute;

width: 20px;

height: 20px;

border-top: 1px solid;

border-left: 1px solid;

top: -11px;

left: 13px;

background: #f2f2f5;

transform: rotate(45deg);

}

如果您希望带箭头的盒子是透明的,这是实现它的另一个技巧(因为上面的解决方案将纯色视为背景)：

body {

margin:0;

background-image:linear-gradient(to right,yellow,pink);

}

.box {

border: 1px solid;

border-top:transparent; /*make border-top transparent*/

margin: 50px;

height: 50px;

position:relative;

/* Use gradient to mimic the border top with a transparent gap */

background:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px) top/100% 1px no-repeat;

}

.box:before {

content: "";

position: absolute;

width: 20px;

height: 20px;

border-top: 1px solid ;

border-left: 1px solid;

top: -11px;

left: 14px;

transform: rotate(45deg);

}

这是另一个带有虚线边框的版本：

body {

margin:0;

background-image:linear-gradient(to right,yellow,pink);

}

.box {

border: 1px dashed;

border-top:transparent; /*make border-top transparent*/

margin: 50px;

height: 50px;

position:relative;

background:

repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top left/10px 1px,

repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top right/calc(100% - 40px) 1px;

background-repeat:no-repeat;

}

.box:before {

content: "";

position: absolute;

width: 20px;

height: 20px;

border-top: 1px dashed;

border-left: 1px dashed;

top: -11px;

left: 13px;

transform: rotate(45deg);

}