Question

我想在整个箭头周围绘制边框，问题在右侧，原因是它围绕正方形绘制。

原因是直角三角形是透明的，因此可以看到它。没有这些箭头，如果它们的颜色相同，就看不到。

任何想法该怎么做？

HTML

.firstArrow {
  position: relative;
  background: red;
  text-align: center;
  margin-right: 10px;
  margin-left: 0px;
  height: 50px;
  width: 330px;
  float: left;
  z-index: 3;
  padding-left: 50px;
  padding-top: 7px;
}

.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient(to right top,red 50%,transparent 50%);
}

.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(to right bottom,red 50%,transparent 50%);
}

.secondArrow {
  position: relative;
  background: blue;
  margin-right: 10px;
  padding-left: 50px;
  padding-top: 7px;
  left: -20px;
  float: left;
  z-index: 2;
  height: 50px;
  width: 330px;

}
.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;   
  text-align: center;
  top: 0;
  background: linear-gradient(to right top,blue 50%,transparent 50%);
}

.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(to right bottom,blue 50%,transparent 50%);
}
.thirdArrow {
  position: relative;
  background: green;
  text-align: center;
  padding-top: 7px;
  height: 50px;
  width: 330px;
  left: -40px;
  float: left;
  z-index: 1;
}

.thirdArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, green 50%,transparent 50%);
}
.thirdArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, green 50%, transparent 50%);
}

<div class="firstArrow"> 1 </div>
<div class="secondArrow"> 2 </div>
<div class="thirdArrow"> 3 </div>

Answer 1

您可以使用偏斜变换来改变形状：

.arrow {
  position: relative;
  text-align: center;
  padding: 20px 0;
  width: 100px;
  float: left;
  color: #fff;
  z-index: 0;
}

.arrow:before,
.arrow:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  top: 0;
  height: 50%;
  left: -3px;
  right: 0;
  transform: skewX(45deg);
  transform-origin: bottom;
  background: var(--c, red);
  border: 3px solid #000;
  border-bottom: 0;
}

.arrow:after {
  transform: scaleY(-1) skewX(45deg);
}

.arrow:first-child {
  overflow: hidden;
  border-left: 3px solid #000;
}

<div class="arrow"> 1 </div>
<div class="arrow" style="--c:blue;"> 2 </div>
<div class="arrow" style="--c:green;"> 3 </div>

Answer 2

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  width: 30%;
}

.firstArrow {
  background: red;
}

.secondArrow {
  background: blue;
}

.thirdArrow {
  background: green;
}

.firstArrow, .secondArrow, .thirdArrow {
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
}

.firstArrow::before, .secondArrow::before, .thirdArrow::before {
    content: '';
    position: absolute;
    width: 41px;
    height: 41px;
    background: red;
    right: -21px;
    top: 9px;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.secondArrow::before {
  background: blue;
}

.thirdArrow::before {
  background: green;
}

.firstArrow::after, .secondArrow::after, .thirdArrow::after {
  content: '';
  position: absolute;
  width: 49px;
  height: 49px;
  right: -26px;
  border: 1px solid;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 5px;
}

.firstArrow::after {
  border-color: red;
}

.secondArrow::after {
  border-color: blue;
}

.thirdArrow::after {
  border-color: green;
}

.blue-border::before, .red-border::before, .green-border::before {
    content: '';
    position: absolute;
    border: 1px solid red;
    transform: rotate(0);
    width: 100%;
    height: 68px;
    left: 0;
    top: -5px;
    background: transparent;
}

.blue-border::before {
  border: 1px solid blue;
}

.green-border::before {
  border: 1px solid green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="wrapper">
     <div class="firstArrow red-border"> 1 </div>
   </div>
  
  <div class="wrapper">
     <div class="secondArrow blue-border"> 2 </div>
   </div>
  
  <div class="wrapper">
     <div class="thirdArrow green-border"> 3 </div>
   </div>
</body>
</html>

检查您是否想要这样的东西！

Answer 3

请检查以下示例。希望它能满足您的要求。使用伪元素::before和::after

创建了右侧箭头及其边框。

.firstArrow {
    position: relative;
    background: #eee;
    height: 50px;
    width: 150px;
    float: left;
    text-align: center;
    line-height: 50px;
    border: solid 3px #999;
}
.firstArrow:after,
.firstArrow:before {
    content: '';
    position: absolute;

}
.firstArrow:before {
    top: 0;
    right: -50px;
    z-index: 2;
    border: 25px solid;
    border-color: transparent transparent transparent #eee;
}
.firstArrow:after{
    top: -3px;
    right: -58px;
    z-index: 1;
    border: 28px solid;
    border-color: transparent transparent transparent #999;
}

<div class="firstArrow">shape 1</div><div class="firstArrow">shape 2</div><div class="firstArrow">shape 3</div>

如何绘制边框箭头？

3 个答案: