如何在css

Question

如何使用css创建此箭头？

我无法移除三角形第三面的边框

这是我到目前为止所做的：

    #arrowbox
    {
     width: 200px;
     height: 50px;
     background-color:white;
     margin-left:100px;
     margin-top:100px;
     position: relative;
     border-style:solid;
    }

    #arrowbox:after {
    	left: 100%;
     	top: 20%;

     	content: " ";
    	height: 0;
	    width: 0;
	    position: absolute;
	    border-style:solid;
	    border-color: rgba(0, 128, 0, 0);
	    border-left-color: black;
	    border-width: 40px;
	    margin-top: -25px;
    }

<div id="arrowbox"></div>

Answer 1

您可以使用伪元素和渐变来尝试这样的事情：

.arrow {
  width:300px;
  height:100px;
  margin:50px;
  border:1px solid #000;
  border-right:none;
  position:relative;
}
.arrow:before {
  content:"";
  position:absolute;
  right:-50px;
  width:100px;
  height:100px;
  border-top:1px solid #000;
  border-right:1px solid #000;
  transform: rotate(45deg);
}
.arrow:after {
  content:"";
  position:absolute; 
  right:0;
  top:-20px;
  bottom:-20px;
  width:1px;
  background:
   linear-gradient(#000,#000)top/100% 20px no-repeat,
   linear-gradient(#000,#000)bottom/100% 20px no-repeat;
}

<div class="arrow">
</div>

您还可以使用SVG的多边形元素轻松创建它：

svg polygon {
 stroke:#000;
 fill:transparent;
}

<svg height="100" width="300">
  <polygon points="0,20 0,80 200,80 200,100 300,50 200,0 200,20"  />
</svg>

Answer 2

您可以利用$request->route()属性，但目前尚未得到广泛支持：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

＆＃13;

＆＃13;

clip-path

＆＃13;

#arrowbox {
  width: 100px; height: 100px;
  background: pink;
  -webkit-clip-path: polygon(0% 35%, 75% 35%, 75% 25%, 99% 50%, 75% 75%, 75% 65%, 0% 65%);
  clip-path: polygon(0% 35%, 75% 35%, 75% 25%, 99% 50%, 75% 75%, 75% 65%, 0% 65%);
}

＆＃13;

＆＃13;

＆＃13;

对于那些寻找SVG选项的人来说，如果您愿意，这可以让您轻松填充颜色，或者根据需要添加其他样式属性：

＆＃13;

＆＃13;

<div id="arrowbox"></div>

＆＃13;

svg { width: 150px; height: 150px; }

＆＃13;

＆＃13;

＆＃13;