带有伪元素的Html / Css三角形 [英] Html/Css Triangle with pseudo elements

问题描述

我试图用伪元素创建一个三角形形状。如下图所示：

但这就是我得到的。

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

  .container .form  -  container：before {
 content：; 
位置：绝对; 
 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纯白色; 
 
  

解决方案

的边界。你可以查看这个链接 CSS三角形如何工作？，你将会了解边界的工作方式以及为什么你会得到这个输出。

另一种解决方案是像这样使用旋转和 border p>

  .box {border：1px solid; margin：50px; height：50px;位置：相对;背景：＃f2f2f5;}。box：before {content：;位置：绝对; width：20px; height：20px; border-top：1px solid; border-left：1px solid;顶部：-11px;左：13px;背景：＃f2f2f5; transform：rotate（45deg）;}  

< div class =box>< / div>

如果您希望带箭头的方框是透明的，则可以使用另一种方法实现它（如上面的解决方案将纯色作为背景）：

  body {margin：0; background-image：线性渐变（向右，黄色，粉红色）;}。box {border：1px solid;边框顶：透明; / *使边框顶部透明* / margin：50px; height：50px; position：relative;}。box：before {content：;位置：绝对; width：20px; height：20px; border-top：1px solid; border-left：1px solid;顶部：-11px;左：13px; transform：rotate（45deg）;} / *在元素后面使用线性渐变来模拟带有间隙的边框顶部。位置：绝对;左：0;右：0; height：1px; background-image：线性渐变（向右，黑色10px，透明10px，透明39px，黑色39px）;}  

 < div class =box>< / div>  

I am trying to create a triangle shape with the pseudo elements. like the one in the image below.

But this is what i get.

Here is what i have tried this far.

.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;
}

解决方案

The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output.

An alternative solution is to use rotation and border like this :

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

And in case you want your box with the arrow to be transparent, here is another trick to achieve it (as the above solution consider solid color as background):

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;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid ;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  transform: rotate(45deg);
}
/* Use after element to mimic the border top with a gap using linear gradient*/
.box:after {
  content: "";
  position: absolute;
  left:0;
  right:0;
  height: 1px;
  background-image:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px);
}

<div class="box">

</div>

这篇关于带有伪元素的Html / Css三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！