0

I have a problem that is best illustrated with an image. I have the turquoise block already, but i want this darker area which is inside the red circle. I would prefer an CSS-only solution if this is possible.

This is the effect I want to achieve

My code so far is this: http://jsfiddle.net/3D2g7/

div {
    width: 200px;
    height: 200px;
    background-color: #000;
}

.image-container {
    position: relative;
}

.image-container span {
    position: absolute;
    background-color: #00b9e5;
    padding: 7px 17px;
    top: 7px;
    left: -9px;
    border-top-left-radius: 7px;
    color: #fff;
    text-transform: uppercase;
}
1
  • The solution: see below.
    – JohanVdR
    May 3, 2014 at 14:47

1 Answer 1

1

http://jsfiddle.net/HeT72/2/

Use the :after pseudo selector to position the bottom curved border under the span element.

div {
    width: 200px;
    height: 200px;
    background-color: #000;
}

.image-container span {
    color: #fff;
    text-transform: uppercase;
    padding: 7px 17px;
    display: inline-block;
    background-color: #00b9e5;
    position: relative;
    left: -7px;
    border-top-left-radius: 7px;
}
.image-container span:after {
    position: absolute;
    left:0;
    z-index:-1;
    background-color: #095F72;
    padding: 7px 17px;
    border-bottom-left-radius: 7px;
    display: block;
    content:'';
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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