0
Q
带有边框的色带
A
回答
1
This是我能做的最好的。
h1 span:before, h1 span:after {
content: "";
height: 90%;
margin-top: 2px;
width: 70px;
border: 3px solid black;
position: absolute;
top: 0;
}
h1 span:before {
right: 100%;
border-left: 0 none;
}
h1 span:after {
left: 100%;
border-right: 0 none;
}
h1:before, h1:after {
content: "";
height: 31px;
width: 31px;
margin-top: 8px;
position: absolute;
top: 0;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
h1:before {
border-top: 3px solid black;
border-right: 3px solid black;
right: calc(100% + 70px - 16px);
}
h1:after {
border-bottom: 3px solid black;
border-left: 3px solid black;
left: calc(100% + 70px - 16px);
}
注意:
- 不会与旧的浏览器工作不支持:
transform
,calc
,:before
和:after
- 这适用于标题的任何长度但是,如果更改字体大小,则必须手动更改
h1:before, h1:after
的宽度和高度。
相关问题
- 1. 带边框颜色的RoundedImageview
- 2. 带白色边框的三角形
- 3. Android - 带边框颜色的选择器?
- 4. Silverlight带有黑色边框的白色文本?
- 5. 带有XAML中黑色边框的白色字体
- 6. 如何创建带有灰色边框的白色箭头?
- 7. 带有黑色外部但灰色内边框的表格
- 8. 带有圆边的边框塌陷?
- 9. 带边框折叠的CSS中的表格边框颜色
- 10. React-native FacebookSDK显示为带有红色边框的空框
- 11. 带边框的下拉框
- 12. 带边框的带角度的div
- 13. 带有彩色边框但没有填充的ggplot2
- 14. 创建带和不带边框的Mixin
- 15. 在iReport中带边框的细节带
- 16. CSS边框 - 不带边角的框
- 17. 带边框的图标,彼此相邻并带有边框悬停效果
- 18. 带有链接的图像上的蓝色边框ie 11.0.9600.18314
- 19. 如何创建带有彩色边框的PDF
- 20. css带有鲜明边框的3色线性渐变
- 21. 绘制带有彩色圆角边框的矩形形状
- 22. Magento:带有白色边框的PNG水印
- 23. 找到带有黑色边框的最大方形
- 24. 如何更改ngTagsInput的边框颜色是否带有焦点?
- 25. 如何创建一个带有白色背景,带有三角形箭头的灰色边框的布局 - Android
- 26. 带有圆形边框的Android桌面
- 27. 带有边框css的轮廓div?
- 28. 添加带有WPF边框的按钮
- 29. 带有边框的等高线列
- 30. img带有FF边框的圆角
你不会得到没有图像的45°角。 Id做它的插图,并将其导出为SVG,这将是我认为最干净的解决方案(IE9 +浏览器支持);编辑确定有-webkit-transform:rotate(45deg);但编号仍然在SVG中执行(技术上与图像一样多html + css) – for3st 2014-11-05 10:04:26
您可以发布小提琴或您用于创建无边框的代码 – Quince 2014-11-05 10:14:25
http://jsfiddle.net/u2o1k8jp/1/ somethink像那样。 – 2014-11-05 10:36:45