如何用角度创建div

Question

我想像这张图片一样创建div：

到目前为止，我创建了这个：

<div style="width: 300px; height: 200px; left:20px; top: 40px;">
<div style="width: 300px; height: 20px; top: 0px; background-color: #76b900; border-radius: 3px; "/>

</div>

如何添加像图片一样的颜色渐变。还有我如何像图片一样添加45度角？

Answer 1

我认为你需要2个div来完成这个，只需使用css。

一个作为带有文本的块，在右侧你应该浮动div并对它应用类似的样式：

How do CSS triangles work?

我个人会考虑图像。

Answer 2

您可以使用2 div，也可以使用:after伪元素和箭头点图像。

编辑： 想一想，使用2个倾斜的div也需要使用带有箭头点图像的:before伪元素。

Answer 3

我们的想法是使用与主元素具有相同渐变的伪元素，但是对角线穿过，然后将其旋转45度：

h1 {
    background: linear-gradient(#5FA309, #3B8018);
    position: relative;
    line-height: 30px;
}

​h1:after {
    content: '';
    background: linear-gradient(top left, #5FA309, #3B8018);
    transform: rotate(45deg);
    position: absolute;
    top: 4px; right: -11px;
    width: 21px;
    height: 21px;
}​

以下是演示：http://codepen.io/JosephSilber/pen/bFfqn

P.S。不要忘记生产中的供应商前缀......

Answer 4

你走了：

<div class-"container">
 <div class="arrow-body"></div>
 <div class="arrow-right"></div>
</div>

.container {
 width:300px;
 overflow:auto;
}

.arrow-body {
 width:270px;
 height:60px;
 background:green;
 float:left;
}

.arrow-right {
 width: 0; 
 height: 0; 
 border-top: 30px solid transparent;
 border-bottom: 30px solid transparent;
 border-left: 30px solid green;
 float:left;
}