JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse voluptas culpa, ab tenetur voluptates aliquam soluta quos nostrum corporis omnis.
</div>

SCSS

body {
  background: green;
}

.box {
  position: relative;
  padding: 20px;
  margin: 20px;
  border-radius: 15px 15px 0 15px;
  /* background: rgb(153,153,153); */
background: linear-gradient(315deg, rgba(153,153,153,0) 0%, rgba(153,153,153,0) 15px, rgba(153,153,153,1) 15px, rgba(153,153,153,1) 100%);
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px 0 0 0;
    background: linear-gradient(315deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
  }
}