gpt4 book ai didi

带有伪元素的 Html/Css 三 Angular 形

转载 作者:行者123 更新时间:2023-11-28 02:00:34 25 4
gpt4 key购买 nike

我正在尝试使用伪元素创建一个三 Angular 形。就像下图中的那个。 enter image description here

但这就是我得到的。 enter image description here

这是我迄今为止尝试过的方法。

.container .form--container:before {
content: "";
position: absolute;
top: 0px;
left: 130px;
width: 28px;
height: 28px;
transform: translate(-1rem, -100%);
border-left: 1.5rem solid #979797;
border-right: 1.5rem solid #979797;
border-bottom: 1.5rem solid white;
}

最佳答案

问题在于边框的使用。你可以查看此链接 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);
}
<div class="box">

</div>

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

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);
}
<div class="box">

</div>

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

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);
}
<div class="box">

</div>

关于带有伪元素的 Html/Css 三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49347841/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com