html中如何创建三角形,html – 如何使用border-radius在CSS3中创建三角形

演示

#player {

margin: 32px;

position: relative;

width: 400px;

height: 250px;

background-color: #222;

}

#inner {

transform: rotate(45deg);

background-color: silver;

width: 100px;

height: 100px;

top: 20px;

left: -50px;

position: relative;

border-radius: 20px;

}

#outer {

position: absolute;

top: 50px;

left: 165px;

width: 70px;

height: 140px;

overflow: hidden;

}

这应该产生：

通过创建一个正方形,使用CSS变换旋转它,使角变圆并用外盒剪切它来实现效果.内部元件可以根据需要进行调整,因此有些灵活.

备择方案

SVG图像支持这种类型的形状,并且在所有现代浏览器中都受支持.简单的SVG可以手动编码为XML,并且有各种免费/付费编辑器可以使用它们.