如何创建点划线和点划线点线和矩形
在 CSS 中不使用图像或其他外部链接(如果没有更好的方法,可以使用内联数据 url)。
https://codepen.io/ibrahimjabbari/pen/ozinB
包含一些示例,例如
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.它使用内容和旋转 CSS 属性,也许可以使用这些属性。
最佳答案
您可以尝试结合使用 repeating-linear-gradient
和 radial-gradient
.dash-dot {
height:50px;
background:
radial-gradient(circle at center,#000 2px,transparent 3px) 5px 50%/20px 5px repeat-x,
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) center/100% 3px no-repeat
}
.dash-dot-dot {
height:50px;
background:
radial-gradient(circle at center,#000 2px,transparent 3px) 0px 50%/30px 5px repeat-x,
radial-gradient(circle at center,#000 2px,transparent 3px) 10px 50%/30px 5px repeat-x,
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 30px) center/100% 3px no-repeat;
}
<div class="dash-dot"></div>
<div class="dash-dot-dot"></div>
要有一个矩形,你需要在每一边重复相同的:
.dash-dot {
height:210px;
background:
/*right*/
repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) calc(100% - 1px) 0/3px 100% no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 100% 5px/5px 20px repeat-y,
/*left*/
repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) 1px 0/3px 100% no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 0 5px/5px 20px repeat-y,
/*top*/
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 1px/100% 3px no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 5px 0/20px 5px repeat-x,
/*bottom*/
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 calc(100% - 1px)/100% 3px no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 5px 100%/20px 5px repeat-x;
}
<div class="dash-dot"></div>
关于html - 如何在 CSS 中创建点划线和点划线点线和矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59551585/