倾斜一个角并将边框半径添加到对角答案

【问题标题】：Skew One Corner And Add Border Radius To Opposite Corner倾斜一个角并将边框半径添加到对角
【发布时间】：2022-07-15 23:37:47
【问题描述】：

如何使用 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>

【问题讨论】：

你需要虚线边框吗？
是的，需要虚线边框。

标签： css border radius skew

【解决方案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
}

&lt;span&gt;Shift top-right corner&lt;/span&gt;

【讨论】：

感谢您的回答。你是对的，这种方法很难掌握，尤其是对于大中型的实现。我不确定使用图像是一个好主意，因为内部文本将是动态的，这会影响形状的宽度。
这几乎适用于一些长度的文本 - 只是右上角附近的破折号的一个小问题，但这可能不会被注意到，也可能无关紧要。但是短文本有一个问题，after 元素可以覆盖最后几个字符。
您可以添加padding-right。

【解决方案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>

【讨论】：