CSS中的非矩形框
斯坦韦伯
基本上：
有没有更好的方法来实现这样的想法
比在干这个
<h2><span class="black poly1">Lorem ipsum dolor</span><br/>
<span class="black poly2">sit amed</span></h2>
和
h2 {
line-height: 50px;
}
.black {
color: #fff;
-moz-box-shadow: 3px 3px 0px 0px #C81928;
-webkit-box-shadow: 3px 3px 0px 0px #C81928;
box-shadow: 3px 3px 0px 0px #C81928;
padding: 5px;
margin: 20px;
}
.poly1 {
background: url(http://metamonks.com/meta/poly1.svg);
background-size: cover;
}
.poly2 {
background: url(http://metamonks.com/meta/poly2.svg);
background-size: cover;
margin-left: 120px;
}
我已经使用了SVG文件，但是有一些缺点：
- CSS下拉阴影不适用于形状，但适用于边界框
- 通过代码进行编辑不是那么简单
我当时想在CSS框周围放置一些非常拉伸的三角形，但无法正确完成。我应该最好继续尝试一下（非常欢迎提示！），还是有一个更优雅的解决方案？
保罗·勒博
为什么不只在SVG文件本身中（即内部）添加阴影效果？
<svg width="369px" height="60px" viewBox="0 0 369 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M73,41 L77,97 L435,97 L438,49 L73,41 Z" fill="red" transform="translate(4,4)"/>
<path d="M73,41 L77,97 L435,97 L438,49 L73,41 Z"/>
</svg>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带角的HTML矩形框
- 2
脸部未显示红色矩形框
- 3
Matlab：使用名称创建矩形框
- 4
y轴与矩形框之间以及矩形框之间的间距
- 5
显示空矩形框，而不是HTML中的卢比符号
- 6
如何在Android Studio中围绕EditText创建矩形框
- 7
带有'x'的信封/矩形框会出现在Chrome的各种网页中
- 8
如何从崇高的文本编辑器中删除文本周围的矩形框
- 9
使用graphics.py查找Python中矩形框的颜色
- 10
显示空矩形框，而不是HTML中的卢比符号
- 11
数学-另一个矩形框
- 12
如何在图像上绘制矩形框；wxPython？
- 13
在放置在UIImageview上的矩形框架中创建图像
- 14
如何在 Construct 3 中创建非矩形点击框？
- 15
当使用OpenCV产生干扰时，如何获取矩形框的轮廓
- 16
在 Python 中将 Curses 矩形框扩展到终端的边缘
- 17
仅使用CSS构建带有透明圆的矩形框架
- 18
在 CSS 中创建和加入非矩形横幅
- 19
如何在不丢失任何内容的情况下检测所有矩形框python opencv
- 20
动画：在较大的矩形框内以自己的中心旋转 svg 路径
- 21
在 Unity 中创建非矩形 UI？
- 22
UniformGrid 中按钮的选取框/矩形选择
- 23
在CSS中隐藏矩形的某些部分
- 24
如何计算非矩形范围的列中的单元格
- 25
在Java中的JPanel上绘制随机的非重叠矩形
- 26
在Javascript中对非矩形形状创建斜角效果
- 27
动态更改C＃中的非矩形窗口？
- 28
在 C 中实现一个非矩形数组
- 29
在图像中的人周围绘制矩形边界框
我来说两句