Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I want this border shape with pure css for my website pagination shape I want

share|improve this question
2  
Hello new dev, welcome to GDSE and thanks for your question. I don't want to sound harsh, but what have you tried that didn't work? We kind of expect questions to show a similar amount of investment as a good answer would be. So please share your efforts, and we would be happy to improve on them. –  Vincent Jul 29 at 9:17
1  
Yeah I'm pretty sure no one here could create this without some experimentation. If you expect us to put in the work, you should also show some effort. Please elaborate with what you've tried, or at least read about or thought about trying. We aren't a custom CSS on demand site. –  DumbNic Jul 29 at 13:05
1  
could you please update your post with that info, so it's a bit more legible? You can click edit to edit your post. Thanks! –  Vincent Jul 29 at 18:28

1 Answer 1

up vote 1 down vote accepted

I didn't hash it out too much, but I'd do it with before and after pseudoclasses. Create a circle before that matches the color of your link's background color, then create a circle after that matches the color of the page background.

div { position: relative; }

a {
    width: 150px; height: 100px;
    line-height: 100px;
    background-color: #ddd;
    display: inline-block;
    margin-left: 50px;
    position: relative;
    z-index: 2;
    text-decoration: none;
}

a:before {
    content: "";
    width: 100px; height: 100px;
    background-color: #ddd;
    position: absolute;
    top: 0; left: -50px;
    border-radius: 9999px;
    z-index: -1;
}

a:after {
    content: "";
    width: 100px; height: 100px;
    background-color: #fff;
    position: absolute;
    top: 0; right: -50px;
    border-radius: 9999px;
    z-index: 3;
}

http://jsfiddle.net/be2ax/

share|improve this answer
    
hearty thanks bro..sorry for all mistakes.. –  new dev Jul 30 at 10:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.