CODEWITHSUNDEEP
jqueryhtmlcsscss-shapes
Michael Low
Michael Low

Reputation: 24506

Inset border-radius shape in CSS?

Is there a way I can make this shape image in CSS ? CSS3 is fine, no need for IE compatibility .The gradient part of it is not important, it's that curve on the bottom right that I can't see how to do. I've seen various jQuery corner plugins but nothing that'll work for me so far. I can't use a background image as the content in this will be of variable length.

enter image description here

Edit: Thanks for the replies, very impressive! One thing though - in the image itself, there's a blue background AND a seamless grey border round the whole thing including the curve on the right. Maybe it's impossible to keep this border if the solution involves border-radius 'hacks' on extra elements, but if this can be kept too it would be nicer.

Upvotes: 5

Views: 1836

Answers (3)

frenchie
frenchie

Reputation: 51947

Here's the shape's CSS. You need multiple shapes to accomplish what you want.

body{background:white;}

.Shape{margin:20px 30px;}

.Shape1{
  position:relative;
  width:200px;
  height:65px;
  background:blue;
  border-radius:20px;
  border:2px solid white;
  z-index:2;
  top:0px;
  left:0px;}

.Shape2{

  position:relative;
  width:70px;
  height:40px;
  background:blue;
  border-radius:12px;
  border-bottom:2px solid white;
  z-index:3;
  top:-42px;
  left:170px;}

.Shape3{
  position:relative;
  width:20px;
  height:20px;
  background:blue;
  z-index:4;
  top:-64px;
  left:170px;}

.Shape4{
   position:relative;
   width:40px;
   height:46px;
   background:white;
   top:-110px;
   left:202px;
   z-index:3;
   box-shadow:inset 2px 0px 4px lightgray;
   border-bottom-left-radius:40px;}

.Shape5{
  position:relative;
  height:1px;
  width:218px;
  background:transparent;
  box-shadow:0px 0px 8px black;
  left:18px;
  top:-110px;}

.Shape6{
  position:relative;
  height:50px;
  width:20px;
  background:white;
  top:-160px;
  left:236px;
  z-index:4;}

.Shape7{
  position:relative;
  height:10px;
  width:50px;
  background:white;
  top:-210px;
  left:203px;
  z-index:4;}

And the HTML:

  <div class="Shape">

  <div class="Shape1"></div>
  <div class="Shape2"></div>
  <div class="Shape3"></div>
  <div class="Shape4"></div>
  <div class="Shape5"></div>
  <div class="Shape6"></div>
  <div class="Shape7"></div>

  </div>

Here's a JsBin for the output.

Upvotes: 1

SDC
SDC

Reputation: 14222

A round-out border can't be done with standard CSS on a single DOM object, but you can use CSS to do it by adding extra elements.

The trick to doing this is to use the CSS :before and :after selectors to effectively create an extra element on either side of the main element, and then use appropriate border-radius and background to shape that to fit.

It's not easy, but it's become quite a common trick to use it for tabs. For example, see here for a good tutorial.

Hope that helps.

Upvotes: 0

Amberlamps
Amberlamps

Reputation: 40448

I have created a little something. There is probably a better solution, but maybe this helps.

jsFiddle

CSS:

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,
.bubble .white,
.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML:

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>

Upvotes: 3

Related Questions