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

Question

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

我的 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>

Answer 1

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

Answer 2

你可以简单地使用伪元素和数据属性。您将能够在不更改 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>

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

How to create a custom arrow with two colors?

html

css

css-shapes