在 CSS 和/或 HTML 中创建梯形 [关闭]

Posted 2023-03-05

【中文标题】在 CSS 和/或 HTML 中创建梯形 [关闭]

【英文标题】：Creating a trapezium in CSS and/or HTML [closed]

【发布时间】：2013-12-03 06:22:58

【问题描述】：

我找到了大量使用 CSS3 创建梯形的教程，但我希望创建一个四边形，其中没有一个边是平行的（梯形），如下图所示。

这可能吗？

【问题讨论】：

这是您要找的吗？ ***.com/questions/7920754/…

不...它的顶部和底部边缘是平行的。

它必须是生成这些形状的“工厂”吗？如果没有，请看我的回答。这将只创建一个示例。

您是否尝试在不使用画布元素的情况下执行此操作？

是的，没有画布也可以

【参考方案1】：

好的..抱歉迟到了。这是我的答案：

小提琴：http://jsfiddle.net/fELER/1/

CSS：

#up-triangle 
   width: 0; 
   height: 0; 
   border-bottom: 200px solid yellow; 
   border-left: 100px solid transparent; 
   border-right: 100px solid transparent; 


#right-triangle 
   position:absolute;
   top: 10px;
   left:175px;
   width: 50px; 
   height: 100px; 
   border-style: solid;
   border-width: 100px 0 0 300px; 
   border-color: transparent transparent transparent yellow;
   -webkit-transform: skew(29deg); 
   -moz-transform: skew(29deg); 
   -o-transform: skew(29deg);
   transform: skew(29deg);

html：

<div id="up-triangle"></div>
<div id="right-triangle"></div>

一些有用的链接： http://www.css3shapes.com/

http://apps.eky.hk/css-triangle-generator/

【参考方案2】：

您可以“手动”执行此操作 html:

<canvas id="polygon" />

javascript

var polygon = document.getElementById('polygon').getContext('2d');
polygon.fillStyle = '#f00';
polygon.beginPath();
polygon.moveTo(0, 0);
polygon.lineTo(90,50);
polygon.lineTo(70, 70);
polygon.lineTo(0, 90);
polygon.closePath();
polygon.fill();

这并不意味着它是凸面的并且没有平行线。您必须输入正确的坐标。

小提琴：http://jsfiddle.net/8t4rZ/

【讨论】：

太棒了...还有什么方法可以在角度上创建边界半径吗？

好的，这里有描述：***.com/questions/1255512/…

【参考方案3】：

#box 
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;

CSS 梯形

【讨论】：

我正在寻找梯形（没有平行边）。谢谢