CODEWITHSUNDEEP
css
Piotr Mirosz
Piotr Mirosz

Reputation: 866

Rectangle with 1 circle side

 .addcircle{
    width:15%;
    height:30px;
    position:relative;
    }
    .addcircle:hover{
    background: #1a1aff;
    color:white;
    }
    .addcircle:hover a{
    background: #1a1aff;
    color:white;
    }
    .addcircle:after{
     position: absolute;
        z-index: 1;
        left: 80%;
        /* top: 0%; */
        width: 30px;
        height: 30px;
        margin-top: 0px;
        
        border-radius: 50%;
        content: "";
    }


      .addcircle:hover:after{background: #1a1aff;}
    <div id="main">
    HOOVER LINK BELOW
    <div class="addcircle">
    <a href="">some page</a>
    </div>
    <div class="addcircle" style="width:20%">
    <a href="">some page 2</a>
    </div>
    </div>

How to do same effect like main(1st link) for responsive width??

As you can see on example, 1st hover look nice but 2nd one not rly... any clue?

Because when i check for bigger or smaller screen my circle move some where.

Upvotes: 1

Views: 73

Answers (3)

Jacob McKay
Jacob McKay

Reputation: 2816

Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:

a {
  color: white;
  padding: 5px;
  border-radius: 0 1rem 1rem 0 ;
  background-color: blue;
}
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Some Page</a>
<br/>
<br/>
<a href="https://www.youtube.com/watch?v=32FB-gYr49Y">Some Page 2</a>

Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.

Upvotes: 1

Bilal Saeed
Bilal Saeed

Reputation: 116

Just add the display property to your .addcircle div:

.addcircle{
  width:15%;
  height:30px;
  position:relative;
  display: flex;
}

and for .addcircle:after change right position instead of left:

.addcircle:after{
     position: absolute;
        z-index: 1;
        right: -12px;
        width: 30px;
        height: 30px;
        margin-top: 0px;

        border-radius: 50%;
        content: "";
    }

Upvotes: 0

mrReiha
mrReiha

Reputation: 955

As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.

.addcircle{
    width:15%;
    height:30px;
    position:relative;
}
.addcircle:hover{
    background: #1a1aff;
    color:white;
}
.addcircle:hover a{
    background: #1a1aff;
    color:white;
}
.addcircle:after{
    position: absolute;
    z-index: -1;
    right: -15px;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    border-radius: 50%;
    content: "";
}


.addcircle:hover:after{
    background: #1a1aff;
}
<div id="main">
    HOOVER LINK BELOW
    <div class="addcircle">
    <a href="">some page</a>
    </div>
    <div class="addcircle" style="width:20%">
    <a href="">some page 2</a>
    </div>
    </div>

However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.

a{
    width:20%;
    display: block;
    height: 30px;
    position:relative;
}
a:hover{
    background: #1a1aff;
    color:white;
}
a:after{
    position: absolute;
    z-index: -1;
    right: -15px;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    border-radius: 50%;
    content: "";
}

a:hover:after{
    background: #1a1aff;
}
<div id="main">

    <span>HOOVER LINK BELOW</span>
    
    <a href="">some page</a>
    <a style="width: 50%" href="">some page 2</a>
    
</div>

Upvotes: 0

Related Questions