内容简介:翻译自:https://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius
属性.
只是想知道剪辑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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
MATLAB在数学建模中的应用
卓金武 编 / 北京航空航天大学 / 2011-4 / 34.80元
《MATLAB在数学建模中的应用》从数学建模的角度介绍了MATLAB的应用。《MATLAB在数学建模中的应用》的4位作者均具有实际的数学建模参赛经历和竞赛指导经验。书中内容完全是根据数学建模竞赛的需要而编排的,涵盖了绝大部分数学建模问题的MATLAB求解方法。 《MATLAB在数学建模中的应用》内容分上下两篇。上篇介绍数学建模中常规方法MATLAB的实现,包括MATLAB交互、数据建模、程序......一起来看看 《MATLAB在数学建模中的应用》 这本书的介绍吧!