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

概述我使用border-radius属性来实现圆角.但我不知道如何获得这种形状的圆角.我尝试从两侧给出相同的尺寸,但他们只是没有给我确切的形状.我在这里错过了一些 CSS3属性. 只是想知道剪辑css属性是否是答案. 更新： http://jsfiddle.net/YWnzc/136/ 演示 #player { margin: 32px; position: relative; width 我使用border-radius属性来实现圆角.但我不知道如何获得这种形状的圆角.我尝试从两侧给出相同的尺寸,但他们只是没有给我确切的形状.我在这里错过了一些 CSS3属性.

只是想知道剪辑CSS属性是否是答案.

更新：

http://jsfiddle.net/YWnzc/136/

解决方法@H_502_11@ 演示

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

<div ID="player">  <div ID="outer">    <div ID="inner"></div>  </div></div>

这应该产生：

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

http://css3shapes.com/有一些很好的例子(注意页面底部的心脏)

备择方案

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

另见：Raphaël,a library for working with vector graphics on the web

总结

以上是内存溢出为你收集整理的html – 如何使用border-radius在CSS3中创建三角形全部内容，希望文章能够帮你解决html – 如何使用border-radius在CSS3中创建三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。