How to Have a Non-Rectangular Div

How to have a non-rectangular div?

finally! it took a little doing but I believe this should do it.

function myFunction2(){
alert('i was clicked')
}

function myFunction(){

   for (let i = 0; i < 50; i++){
      let x = 'a0' + i      
      let id = 'a' + (x).slice(-2)
       
       document.getElementById(id).innerHTML = 'xyz' +i;
      
   }

   var end = 0;
   var count = 0;
   var left =[];

   for (let i = 0; i < 25;i++){
      let y = 30 + i*20;
     
      let temp = document.elementFromPoint(18, y); 
       
      if (document.elementFromPoint(18, y)==null)return; 
      if (temp.tagName != 'SPAN')break;
      
   
      let inner = temp.innerHTML;
      let inArray = inner.split('z')
      var start = parseInt(inArray[1]);
      left.push(start)
    }  
    left[left.length-1] = 50
 
    for (var i = 0;i  < left.length;i++){
 
       for(let j = left[i]; j >= end; j--){
          let x = 'a0' + j      
          let id = 'a' + (x).slice(-2)
      
          if (document.getElementById(id) != null)
          document.getElementById(id).innerHTML = 'xyz' + count;
          count++;
          
      
       }
      end = left[i]+1
   
   
    }

 } window.addEventListener('resize', myFunction);

div{
margin:0;padding:0;
}

#better{
margin-top:20px;
display:block;
background:green;

width:100%;
position:relative;
padding:10px;
}

#abs{
display:inline-flex;
justify-content:center;
position:absolute;
background:blue;
height:30px;
width:100px;
top:0%;
right:0%;
}

span{
background:white;
border:solid 1px grey;
display:inline-block;
font-size:16px;
}

#fx{
display:flex;
flex-flow: row-reverse wrap;
justify-content:flex-end;
}

#x{
width:100px;
visibility:hidden;
}

<html>
<body >
<div id='better' >
<div id='fx'>
<span id='x'></span>

<span id='a00'>xyz0</span><span id='a01'>xyz1</span><span id='a02'>xyz2</span><span id='a03'>xyz3</span><span id='a04'>xyz4</span><span id='a05'>xyz5</span><span id='a06'>xyz6</span><span id='a07'>xyz7</span><span id='a08'>xyz8</span><span id='a09'>xyz9</span><span id='a10'>xyz10</span><span id='a11'>xyz11</span>

<span id='a12'>xyz12</span><span id='a13'>xyz13</span><span id='a14'>xyz14</span><span id='a15'>xyz15</span><span id='a16'>xyz16</span><span id='a17'>xyz17</span><span id='a18'>xyz18</span><span id='a19'>xyz19</span><span id='a20'>xyz20</span><span id='a21'>xyz21</span><span id='a22'>xyz22</span><span id='a23'>xyz23</span>

<span id='a24'>xyz24</span><span id='a25'>xyz25</span><span id='a26'>xyz26</span><span id='a27'>xyz27</span><span id='a28'>xyz28</span><span id='a29'>xyz29</span><span id='a30'>xyz30</span><span id='a31'>xyz31</span><span id='a32'>xyz32</span><span id='a33'>xyz33</span><span id='a34'>xyz34</span><span id='a35'>xyz35</span>

<span id='a36'>xyz36</span><span id='a37'>xyz37</span><span id='a38'>xyz38</span><span id='a39'>xyz39</span><span id='a40'>xyz40</span><span id='a41'>xyz41</span><span id='a42'>xyz42</span><span id='a43'>xyz43</span><span id='a44'>xyz44</span><span id='a45'>xyz45</span><span id='a46'>xyz46</span><span id='a47'>xyz47</span>

<span id='a48'>xyz48</span><span id='a49'>xyz49</span><span id='a50'>xyz50</span>
</div>
<div id='abs'>
<button type='button' onclick='myFunction2()'>Click me!</button>
</div>
</div>
</body>
</html>

Make an element non-rectangular in CSS to write text

You’re currently achieving the white shape by setting a background gradient. Instead, use shape-outside to actually create the shape and let the text wrap around it. Like this:

.container {  width: 400px;  height: 200px;  background-color: black;  color: white;}
.shape {  width: 100%;  height: 200px;  background-color: white;  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);  shape-outside: polygon(100% 0, 100% 100%, 0 100%);  float: right;  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);  clip-path: polygon(100% 0, 100% 100%, 0 100%);}
p {  text-align: left;}

<div class="container">  <div class="shape"></div>  <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu erat pharetra orci rhoncus dignissim. Nullam imperdiet justo felis, id venenatis velit pretium in. Donec commodo odio nisl, ut facilisis dui vulputate at. Nullam feugiat semper urna non efficitur.   </p></div>

hover link over a non-rectangular div

No you can't with your current HTML code because what you cannot see is that the surrounding a element shape is rectangular, this is what you are hovering on not the two inner div's, to see it on screen add this to your CSS:

a { border:2px red solid; }

and you will see this result JSFiddle 1 which will show you the area of the outer <a>

a {  border: 2px red solid;}#ax {  width: 500px;  height: 50px;  background: blue;  border: 2px solid black;}#ex {  width: 100px;  height: 27px;  background: blue;  border-left: 2px solid black;  border-bottom: 2px solid black;  border-right: 2px solid black;  margin-top: -2px}#wai:hover .a {  background: yellow;}

<a href="http://www.reddit.com" target="_blank" style="display:block">  <div id="wai">    <div id="ax" class="a"></div>    <div id="ex" class="a"></div>
  </div></a>

Make a non-rectangular bottom for div?

You can try with multiple background with radial-gradient and apply a drop-shadow filter for the shadow:

.box {  width:200px;  height:100px;  margin:10px;  background:    linear-gradient(#f00,#f00) top/100% calc(100% - 25px),    radial-gradient(85px 30px at bottom,transparent 50%,#f00 52%) 0 calc(100% - 8px)/80px 20px,    radial-gradient(85px 30px at 50% 10px,#f00 50%,transparent 52%) 80px 100%/80px 30px,    radial-gradient(85px 30px at bottom,transparent 50%,#f00 52%) 160px calc(100% - 8px)/80px 20px;  background-repeat:no-repeat;  filter:drop-shadow(0 0 5px blue);}

<div class="box"></div>

How do you create non rectangular shaped image on website header/hero?

I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP

non rectangle image overlay

3 ways to have a slanted container:

use transform: rotate(); on an element separate from your text container.
use pseudo elements ::before or ::after
use background-image of a .png file so that you can have transparency on your text container.

Pseudo elements ::before and ::after have to be attached to a desired element like a div, for example. They also have to have content property, otherwise they will not show at all.

div::before {
  content: "";
}

Their parent element is considered to be the element they are attached to, that would be div in this example. So you can use absolute positioning easily to position it according to your needs.

I made a fiddle with the card example.
https://jsfiddle.net/vbgrn98s/1/

You will have to play with border-width property to adjust its size to suit you.

How to Have a Non-Rectangular Div