-1

Can someone help me write plain html and css code for the below shape ? Thanks in advance enter image description here

yash
  • 11
  • 4

2 Answers2

1

HTML/CSS

.shape {
  clip-path: polygon(0 19%, 100% 0, 100% 100%, 0 81%);
  background-color: red;
  width: 200px;
  height: 400px;
}
<div class='shape'></div>

And you can make any shapes you want with clip path. Try this website to make shapes https://bennettfeely.com/clippy/

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Gnanavel
  • 740
  • 6
  • 18
0

Transparent Borders

div {
    display:inline-block;
    box-sizing: border-box;
    height: 200px;
    border: 40px solid;
    border-top-color: #00000000;
    border-left: 0;
    border-bottom-color: #00000000;
}
<div></div>

Multiple backgrounds

div {
  display: inline-block;
  box-sizing: border-box;
  height: 200px;
  width: 50px;
  background: linear-gradient(to top left, black 50%, white 51%) 0 0/100% 25% no-repeat, linear-gradient(to bottom left, black 50%, white 51%) 0 100%/100% 25% no-repeat, black;
}
<div></div>

Pseudo Elements

div {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 200px;
    width: 50px;
    background: black;
}

div:before,div:after {
    content: '';
    position: absolute;
    height: 25%;
    width: 100%;
}

div:before {
    top: 0;
    background: linear-gradient(to top left,black 50%,white 51%) top/100% no-repeat ;
}

div:after {
    bottom: 0;
    background: linear-gradient(to bottom left,black 50%,white 51%) bottom/100% no-repeat;
}
<div></div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
  • 2
    aside clip-path, you also have transform not answered yet ;) https://jsfiddle.net/ymn39buo/ – G-Cyrillus Sep 23 '20 at 16:24
  • @G-Cyrillus I thought about that But it would require nesting of elements and awkward positioning if you plan on adding content. – Rainbow Sep 23 '20 at 16:28