如何用css创建自定义形状

Question

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

我的HTML：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 2

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