[英]How to create broken lines on CSS/HTML/JS
.broken-line { position: relative; height: 10px; border-top: 1px solid #000; }.broken-line:before { position: absolute; left: -1px; top: -1px; content: ''; border-top: 10px solid #000; border-right: 10px solid transparent; }.broken-line:after { position: absolute; left: -2px; top: -2px; content: ''; border-top: 10px solid white; border-right: 10px solid transparent; }
<div class="broken-line"></div>
您可以使用 SVG 很容易地制作這樣的東西。
<svg viewBox="0 0 500 80" width="500" height="80" stroke="blue"> <text x="75" y="22" fontsize="20" stroke="black">I'm text and I'm on a line lalalalala</text> <line x1="0" x2="50" y1="80" y2="30" /> <line x1="50" x2="500" y1="30" y2="30" /> </svg>
嘗試以下
.broken-line {
border-top: 5px solid red;
border-radius: 25px;
}
您可以將邊框半徑更改為您想要使其更清晰的任何值。
.broken-line {
width: 180px; /* The width/length of the normal line */
height: 10px; /* The "height" of the broken part */
border-top: 2px solid #19c4b0; /* The normal line */
border-left: 2px solid #19c4b0; /* The broken line */
transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}
<div class="broken-line"></div>
如果需要,您還可以輕松添加邊框半徑...示例:
...
border-radius: 10px;
...
是的,有多種方法可以使用 html/css/svg/js 來完成它。 這是一個幫助您入門的技術示例。
body { padding: 5rem 2rem; }.container { position: relative; }.line-tooltip { display: inline-block; position: absolute; left: 1.75rem; border-bottom: dodgerblue 2px solid; transform: translateY(-2rem); opacity: 0; transition: opacity.25s ease; }.line-tooltip:before { content: ""; display: block; position: absolute; bottom: -1.1rem; left: -.5rem; height: 1.25rem; width: 2px; background-color: dodgerblue; transform: rotate(45deg); } #line-test { color: dodgerblue; } #line-test:hover +.line-tooltip { opacity: 1; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/> <div class="container"> <i id="line-test" class="fas fa-info-circle"></i> <- Hover the icon... <aside class="line-tooltip">Hey I'm some text that makes a nifty tooltip. Yay!</aside> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.