Solution 1 :

<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;
}

enter image description here

Solution 2 :

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.

Problem :

I am trying to create HTML for 3 divs that enter image description hereis 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>

Comments

Comment posted by Cem Firat

what have you tried so far? can you show or describe us more? there will hardly be a solution with HTML only. You could do that with CSS and Java Script. I would build it in SVG.

By

Leave a Reply

Your email address will not be published. Required fields are marked *