html - 如何创建带角度的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 并对其应用类似的样式：

CSS 三角形是如何工作的？

我个人会考虑图像。

Answer 2

您可以使用 2 divs，也可以使用: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

PS不要忘记生产中的供应商前缀......

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