cssborderradiusskew

Skew One Corner And Add Border Radius To Opposite Corner

How to reproduce this shape using CSS ?

enter image description here

How to shift the top-right corner ?

<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>

Solution

  • Something like this but still hard to master. I would consider using an image.

    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>