2

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>
Naourass Derouichi
  • 773
  • 3
  • 12
  • 38

2 Answers2

2

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>
Azu
  • 1,494
  • 2
  • 6
  • 11
  • Thanks for the answer. You're right, this approach will be hard to master especially for medium to big size implementations. I'm not sure using an image is a good idea because the inner text will be dynamic which will affect the width of the shape. – Naourass Derouichi Dec 11 '21 at 20:46
  • 1
    This almost works for text of some length - just a small problem with the dash near the upper right but this may not be noticed and may well not matter. Short text however has a problem, the after element can overwrite the last few characters. – A Haworth Dec 11 '21 at 20:52
  • You could add `padding-right`. – Azu Dec 11 '21 at 21:05
1

if you need for the opposite side

.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>
rrrrnnn
  • 31
  • 4