Clever Geek Handbook

Can I create curved dotted lines with CSS?

My goal is to create dashed lines like the ones I have highlighted in the images below. Is this only possible with CSS?

My web page is responsive with Bootstrap and if the window width changes the dotted lines should be in the correct position.

Desired result example 1.

Desired result example 2.

+3


source to share


1 answer


The bad news is that you cannot bend the dotted border. It will always be solid if you use a border radius in CSS. But I think this example will lead you to the right solution. 



    #wrapper {
        width: 680px;
        display:table;
        margin: auto;
    }
    #wrapper > div {
        display: inline-block;
    }
    .circle {
        position:relative;
        padding: 20px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #eee;
        border: solid 1px #ddd;
        z-index: 999;
    }
    .line-top {
        width: 120px;
        height:60px;
        z-index: -1;
        background: transparent;
        border: none;
        border-top: dashed 2px orange;
        padding: 40px 40px;
        border-radius: 50%;
        margin: 20px -50px 0;
    }
    .line-bottom {
        width: 120px;
        height:60px;
        z-index: -1;
        background: transparent;
        border: none;
        border-bottom: dashed 2px orange;
        padding: 40px 40px;
        border-radius: 0 0 50% 50%;
        margin: 0 -65px;
    }
      

        
        
        
      

    
    <div id="wrapper">
    <div class="circle"></div>
    <div class="line-top"></div>
    <div class="circle"></div>
    <div class="line-bottom"></div>
    <div class="circle"></div>
    </div>
Run codeHide result


+5


source






More articles:


All Articles