有没有办法在CSS中制作这个形状图像?
CSS3很好,不需要IE兼容性.它的渐变部分并不重要,它是右下方的曲线,我看不到怎么做.我已经看过各种jQuery角落插件但到目前为止对我来说没什么用.我无法使用背景图像,因为此内容的长度可变.
编辑:感谢您的回复,非常令人印象深刻!但有一件事 – 在图像本身中,有一个蓝色背景和一个无缝的灰色边框围绕整个事物,包括右边的曲线.如果解决方案涉及额外元素的边界半径“黑客”,也许不可能保持这个边界,但如果这也可以保留,那就更好了.
解决方法
我创造了一些东西.可能有更好的解决方案,但也许这会有所帮助.
CSS:
.bubble { width: 200px; height: 30px; } .bubble .content { background: #00f; height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; margin-right: 20px; } .bubble .blue,.bubble .white,.bubble .white .innerwhite { width: 10px; height: 100%; float: right; } .bubble .blue { background: #00f; border-top-right-radius: 10px; } .bubble .white { background: #00f; } .bubble .white .innerwhite { background: #fff; border-bottom-left-radius: 10px; }
HTML:
<div class="bubble"> <div class="white"> <div class="innerwhite"></div> </div> <div class="blue"></div> <div class="content"></div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。