倾斜一个角并将边界半径添加到对角

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>

倾斜一个角并将边界半径添加到对角

Skew One Corner And Add Border Radius To Opposite Corner

css

border

radius

skew