Question

我需要将箭头白色背景设置为与背景相同的颜色，如果我将背景设置为蓝色，将颜色设置为白色，则背景非覆盖区域为白色，并且应该与容器背景的颜色相同（某种灰色） Problem image

这是箭头代码

#arrow {
    width: 120px;
    height: 40px;
    position: relative;
    background: blue;
    color: white;
    padding-left: 25px;
    padding-top: 5px;
}

#arrow:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

#arrow:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid blue;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

我不确定该如何解决。

Answer 1

我使用transform:skew()属性使事情变得更加简单。完全解决您的问题。

body {
  background: #333;
  padding:30px;
}

#arrow {
  width: 120px;
  height: 40px;
  position: relative;
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#arrow::before {
  content:"";
  width: 120px;
  height: 20px;
  position: absolute;
  top:0;
  left:0;
  background:blue;
  transform:skewX(40deg);
  z-index:-1;
}

#arrow::after {
  content:"";
  width: 120px;
  height: 20px;
  position: absolute;
  top:20px;
  left:0;
  background:blue;
  transform:skewX(-40deg);
  z-index:-1;
}

<div id="arrow">Section</div>

Answer 2

这是一个有多种背景的想法：

G<?> tg = new G<>(null);

.arrow {
  padding:0 20px;
  color:#fff;
  font-size:25px;
  width:120px;
  text-align:center;
  line-height:50px;
  display:inline-block;
  background:
    /*right arrow*/
    linear-gradient(to bottom left, transparent 49%,blue 50%) top right,
    linear-gradient(to top left, transparent 49%,blue 50%) bottom right,
    /*left arrow*/
    linear-gradient(to bottom left, blue 49%,transparent 50%) top left,
    linear-gradient(to top left, blue 49%,transparent 50%) bottom left,
    
    blue content-box;
  background-size:20px 50%;
  background-repeat:no-repeat;
    
}

多边形图上的背景色

2 个答案: