如何创建具有两种颜色的自定义箭头？答案

【问题标题】：How to create a custom arrow with two colors?如何创建具有两种颜色的自定义箭头？
【发布时间】：2020-07-24 17:26:36
【问题描述】：

我想创建一个像这张图片一样的自定义形状

我的 HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
    <div class="col-md-10 ">
        <div class="col-md-2" style="background-color: yellow;height: 38px;padding:0;">
            aaaaa
        </div>
        <div class="col-md-1" style="padding:0;">
            <div class="col-md-12" style="background-color: green; border-radius: 0px 400px 50px 0px/0px 150px 23px 0px;">
                mmm
            </div>
            <div class="col-md-12" style="background-color: red; border-radius: 0px 11px 400px 0px/0px 23px 150px 0px;">
                nnnn
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你不会使用SVG吗？
我想从后端获取它的数据并动态创建它...

标签： html css css-shapes

【解决方案1】：

您可以简单地使用伪元素和数据属性。您将能够在不更改 CSS 的情况下从后端生成 HTML（您只需根据需要调整颜色）：

* {
  box-sizing: border-box;
}

.element {
  display: inline-block;
  position: relative;
  padding: 10px 40px;
  background: #ccc;
  border: 1px solid #000;
}

.element:before {
  content: attr(data-before);
  position: absolute;
  top: 0;
  bottom: 50%;
  right: -42px;
  width: 40px;
  background-image: linear-gradient(45deg, black, red);
  border-top-right-radius: 100%;
  border: 1px solid #000;
  color: #fff;
  z-index:99;
}

.element:after {
  content: attr(data-after);
  position: absolute;
  top: 50%;
  bottom: 0;
  right: -42px;
  width: 40px;
  background-image: linear-gradient(45deg, black, green);
  border-bottom-right-radius: 100%;
  border: 1px solid #000;
  color: #fff;
  z-index:99;
}

<div class="element" data-before="A" data-after="B">
  content 1
</div>
<div class="element" data-before="C" data-after="D">
  content 2
</div>
<div class="element" data-before="E" data-after="F">
  content 3
</div>

【讨论】：

【解决方案2】：

使用 HTML5 canvas 标签和 java 脚本来绘制你自己的图像你可以在下面的链接中阅读它 https://www.w3schools.com/html/html5_canvas.asp

【讨论】：