傾斜一個角並將邊框半徑添加到對角

Question

如何使用 CSS 重現此形狀？

如何移動右上角？

 <span>Shift top-right corner</span> <style> span { border: 4px dashed blue; border-radius: 8px 0px 8px 0px; padding: 6px; font-size: 18px; display: inline-block; } </style>

Answer 1

像這樣的東西，但仍然很難掌握。 我會考慮使用圖像。

 span { border: 2px dashed blue; border-radius: 8px 0px 8px 0px; padding: 6px; font-size: 18px; display: inline-block; background:#0CF; position:relative; box-sizing: border-box } span:after{ content:""; width: 15px; height:90%; position:absolute; right:-8px; top:-2px; background:#0CF; transform: skewX(-20deg); border-top: 2px dashed blue; border-right: 2px dashed blue; box-sizing: border-box }

 <span>Shift top-right corner</span>

Answer 2

如果你需要對面

 .text { z-index: 13; position: relative; }.info { margin: 100px; padding: 6px 0px 6px 6px; margin-top: 20px; font-size: 18px; display: inline-block; background: #000; color: #fff; box-sizing: border-box; position: relative; }.info:after { content: ''; width: 35px; height: 100%; position: absolute; bottom: 0; right: 0; z-index: 1; left: -20px; top: -0px; background: #000; transform: skewX(20deg); box-sizing: border-box; }

 <div class="info"> <div class="text">Shift top-right corner</div> </span>