Line Arrow的CSS

Question

有没有人对如何使用纯CSS实现以下2种效果（红色）有任何指示？

我不是要求整个代码，但如果有人可以指导我正确的方向，那真的会很棒。

提前致谢。

Answer 1

对于第二个效果，你应该为图像的容器创建两个伪元素：before和：after，其中border-radius设置为所需的值。元素：在你应该定位到容器的左下侧和元素之前：你应该定位到右下方。您还应该为每个伪元素指定宽度（例如：50％和50％，60％和40％等）。

第二个效果的代码：

.image {
  position: relative;
  width: 350px;
}

img {
  display: block;
  padding: 0;
  margin: 0;
}

.image:before {
  content: '';
  display: inline-block;
  background: rgba(255, 0, 0, .5);
  width: 30%;
  height: 120px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-right-radius: 15px;
}

.image:after {
  content: '';
  display: inline-block;
  background: rgba(255, 0, 0, .5);
  width: 70%;
  height: 120px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-top-left-radius: 15px;
}

<div class="image">
  <img src="http://placehold.it/350x350">
</div>

Answer 2

好的，这是对正确方向的建议。

1. 下面的红色面板看起来像是两个相邻的矩形。您需要适当地设置宽度，然后使用border-radius: a b c d为每个矩形围绕一个角。

2. 效果在我看来就像效果编号2的两个。红色的那个，然后是白色的相同，可能带有z-index以确保它（部分）涵盖了另一个。

我相信您已经知道如何使用opacity或使用rgba设置颜色来制作红色半透明。

我希望有所帮助。

Answer 3

你必须使用伪元素:after＆amp; :before以实现其他直线div的凸起。

您可以尝试这样的事情：

＆＃13;

＆＃13;

div {
  height: 30px;
  width: 200px;
  background-color: red;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: 0px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  margin: auto;
}

div:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  width: 0px;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 10px solid red;
  margin: auto;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

由于您没有提供小提琴，因此请使用以下解决方案作为指导。 CSS将生成弯曲的边缘，您可以将它们连接在一起以产生所需的结果。

div.arrow-curved { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

div.arrow-curved:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 
}

有关CSS形状的更多参考：https://css-tricks.com/examples/ShapesOfCSS/