带有伪元素的HtmlCss三角形

概述我正在尝试使用伪元素创建三角形.喜欢下图中的那个. 但这就是我得到的. 这是我迄今为止尝试过的. .container .form--container:before { content: ""; position: absolute; top: 0px; left: 130px; width: 28px; height: 28px; tra 我正在尝试使用伪元素创建三角形.喜欢下图中的那个.

但这就是我得到的.

这是我迄今为止尝试过的.

.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 ></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 ></div>

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

body { margin:0; background-image:linear-gradIEnt(to right,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,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 ></div>

总结

以上是内存溢出为你收集整理的带有伪元素的Html / Css三角形全部内容，希望文章能够帮你解决带有伪元素的Html / Css三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。