内容简介：翻译自：https://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius
我使用border-radius属性来实现圆角.但我不知道如何获得这种形状的圆角.我尝试从两侧给出相同的尺寸,但他们只是没有给我确切的形状.我在这里错过了一些 CSS3
属性.
只是想知道剪辑css属性是否是答案.
更新：
演示
#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
翻译自：https://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
科学的极致：漫谈人工智能
集智俱乐部 / 人民邮电出版社 / 2015-7 / 49.00元
集智俱乐部是一个从事学术研究、享受科学乐趣的探索者组成的团体，倡导以平等开放的态度、科学实证的精神进行跨学科的研究与交流，力图搭建一个中国的“没有围墙的研究所”。这些令人崇敬的、充满激情与梦想的集智俱乐部成员将带你了解图灵机模型、冯•诺依曼计算机体系结构、怪圈与哥德尔定理、通用人工智能、深度学习、人类计算与自然语言处理，与你一起展开一场令人热血沸腾的科学之旅。一起来看看 《科学的极致：漫谈人工智能》 这本书的介绍吧!
