sharp edges with CSS

user_15594461 0
Viewed 59

I want to make the following shape with sharp corners with CSS and I have tried the following code but it does not give the exact shape, how can I make these sharp corners with CSS? enter image description here

  h1{
    width:150px;
    height:100px;
    background-color:#ff5722;
    margin:20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:white;
    z-index:9;
    }

    h1::before{
      content:"";
      position: absolute;
      width:100%;
      height:100%;
      background-color:#ff5722;
      transform: rotate3d(1,0,1,370deg);
      z-index:-5;
    }
   
    h1::after{
      content:"";
      position: absolute;
      width:100%;
      height:100%;
      background-color:#ff5722;
      transform: rotate3d(1,0,1,-370deg);
      z-index:-9;
    }
frontend css html
2 Answers

Instead of using pseudoelements you can try to use clip-path. In the next example I'm using clip-path with a polygon function. The vertices of the polygon are groups of 2 values, one for the x and one for the y coordinate. The vertices are separated by commas

 h1{
    width:150px;
    height:100px;
    background-color:#ff5722;
    margin:20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:white;
    
   -webkit-clip-path: polygon(0px 0px, 75px 15px, 150px 0px, 135px 50px, 150px 100px, 75px 85px, 0px 100px, 15px 50px, 0px 0px);
    }

   
<h1></h1>

user_78973950

It depends on whether you want the h1 element to have that shape, or whether you want it to be a rectangle with that orangey shape as background.

This snippet assumes you want the h1 element to have that shape and uses clip-path to achieve it.

clip-path takes you from point to point. Here are the points we need:

enter image description here

To make it flexible so you can alter things a bit if required, the snippet uses two CSS variables: --x to say how far along the second point is (working from the top left clockwise) and --y to say how far down it is. All the other points' positions can be worked out from this. Percentages are used so it's responsive.

.shape {
  width: 50vmin;
  aspect-ratio: 4 / 3;
  background-color: #ff5722;
  --x: 40%;
  --y: 10%;
  clip-path: polygon(0 0, var(--x) var(--y), calc(100% - var(--x)) var(--y), 100% 0, calc(100% - var(--y)) var(--x), calc(100% - var(--y)) calc(100% - var(--x)), 100% 100%, calc(100% - var(--x)) calc(100% - var(--y)), var(--x) calc(100% - var(--y)), 0 100%, var(--y) calc(100% - var(--x)), var(--y) var(--x));
}
<body>
  <div class="shape"></div>
</body>

If you want the h1 to itself maintain a rectangle shape then put the code into a before pseudo element absolutely positioned in relation to the h1.

user_108674540
Related