我想使用没有Javascript来实现这样的自定义颜色的形状:
目前,我正在将“框架”的图像覆盖在一个橙色的矩形div上,但这很漂亮。
我想我可以使用动态生成的画布元素,但这不仅需要JS,而且还需要HTML5画布支持。有任何想法吗?
解决方法
我最好的尝试:
http://dabblet.com/gist/4592062
像素完美的任何大小,使用比Ana的原始解决方案更简单的数学,在我看来更直观:)
.triangle { position: relative; background-color: orange; text-align: left; } .triangle:before,.triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle,.triangle:before,.triangle:after { width: 10em; height: 10em; border-top-right-radius: 30%; } .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); }
<div class='triangle'></div>
原文地址:https://www.jb51.cc/css/219322.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。