0
A
回答
2
我添加了一个例子HTML和CSS这样做。这当然只是一种做法。
div{
height: 15px;
width: 50%;
background-color: black;
position: absolute;
top: 0;
}
.left{
transform-origin: top right;
transform: rotate(-5deg);
}
.right{
left: 50%;
transform-origin: top left;
transform: rotate(5deg);
}
<div class="left"></div>
<div class="right"></div>
相关问题
- 1. 阴影与CSS梯形形状按钮
- 2. 带文本的CSS梯形形状
- 3. 双梯形形状
- 4. Android的形状 - 梯度应到右侧
- 5. C#创建梯度图像
- 6. 如何使用CSS创建此形状?
- 7. 使用CSS创建复杂的形状
- 8. 使用CSS创建自定义形状
- 9. 用轮廓创建CSS形状
- 10. 多边形梯度
- 11. CSS梯度劣质
- 12. CSS疯狂梯度
- 13. jQuery的CSS梯度
- 14. 从梯形到右梯形的动画变换充满梯度
- 15. 梯度上的图像与CSS底部
- 16. 的jQuery/CSS创建线性梯度仅具有一个颜色
- 17. 创建CSS3形状?
- 18. css中的梯形轮廓
- 19. 创建复杂的形状与Box2D的
- 20. onDraw填充形状创建与canvas.drawLine
- 21. 制作梯形标签形状
- 22. 与CSS的按钮形状
- 23. 如何在android中构建一个梯形形状?
- 24. 创建一个圆圈用梯度
- 25. 黑莓6:创建文本和梯度
- 26. PDFBox - 带梯度的矩形
- 27. 绘图无圆形梯度
- 28. 计算css梯度差
- 29. css梯度给滚动条
- 30. CSS - 创建高级形状。 (倒三角形?)
我不知道关于梯度,但您可以创建使用border属性和之后传递4个参数的CSS形状。 – xhulio
例如下面的css: 'border-style:solid; border-width:176px 176px 0 176px; 边框颜色:#1e2e42透明透明透明;'会给一个三角形 – xhulio
为什么不使用SVG?在CSS它可能最容易被改造两个'div's或尝试使用两个[CSS三角形]就像提到@xhulio(https://css-tricks.com/snippets/css/css-triangle/)。 – LuudJacobs