<div class="wrapper">
    <div class="smallcircle"></div>
    <div class="bigcircle"></div>
    <div class="smallcircle"></div>
</div>

.wrapper{
    width: 100%;
    margin: 20px;
    display: flex;
}

.smallcircle{
    width: 100px;
    height: 100px;
    background: blue;
    border-radius: 50%;
}

.bigcircle{
    width: 150px;
    height: 150px;
    background: #00BFFF;
    border-radius: 50%;
    align-self: flex-end;
    margin-top: 150px;
}

Thanks but people who have just given negative vote for closing this, so for your info, people use this platform to get help. If you cant just send answers stop giving close votes. I have done this myself without help.

I am trying to create HTML for 3 divs that is diagonal in shape. I have no clue of how shall I arrange this diagonally. If someone can give me some hint It will be really appreciated.
Here is JS FIDDLE
So I just need title, image,text and the point here is linking images with diagonal arrows.

<div class="container">
  <div class="row">
    <div class="col text-center">
    <h3>Title</h3>
    <img style="width:115px;height:115px;" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/256/Circle-icon.png">
    <h4>Lorem Ipsum</h4>
    </div>
    <div class="col  text-center borderline">
    <h3>Title</h3>
    <img style="width:150px;height:150px;" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/256/Circle-icon.png">
    <h4>Lorem Ipsum</h4>
    </div>
    <div class="col  text-center">
    <h3>Title</h3>
    <img style="width:115px;height:115px;" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/256/Circle-icon.png">
    <h4>Lorem Ipsum</h4>
    </div>
  </div>  
</div>