CSS border corner curve backward

Question

How can I make the below image using only html and css

enter image description here

Downvoters never tried to find solution, and thought it can't be done! — Bharadwaj, Dec 19 '14 at 06:57
No proof of effort which is one of SO's key rules (not saying no effort but just none shown). I haven't voted yet but inclined to either down vote or close vote. And I don't think this can't be done, thats never a good reason for down-voting. — Harry, Dec 19 '14 at 06:59

Weafs.py · Accepted Answer · 2014-12-19T17:03:13.783

You can do this using :after :pseudo-element with a single div.

body {
  background: #88FF55;
}
div {
  position: relative;
  width: 150px;
  height: 100px;
  background: #01CC00;
}
div:after {
  content: 'i';
  color: #01CC00;
  position: absolute;
  font-size: 20px;
  bottom: 0;
  right: 0;
  width: 30px;
  font-weight: bold;
  height: 30px;
  text-align: right;
  line-height: 44px;
  border-top-left-radius: 100%;
  background: white;
}

<div></div>

You could use radial-gradient for transparent cut.

body {
  background: #88FF55;
}
div {
  width: 150px;
  height: 100px;
  line-height: 188px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #01CC00;
  background: -webkit-radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
  background: -moz-radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
  background: radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
}

<div>i</div>

Or you could use svg's clipPath.

body {
  background: #88FF55;
}
div {
  height: 100px;
  background: #01CC00;
}

<svg width="150" height="100" viewBox="0 0 150 100">
  <clipPath id="shape">
    <path d="M2,2 L146,2 L146,76 A20,20 1,0 0 126,98 L2,98z" />
  </clipPath>
  <foreignObject clip-path="url(#shape)" width="150" height="100">
    <div></div>
  </foreignObject>
  <text x="140" y="97" font-weight="bold" font-size="16" fill="#01CC00">i</text>
</svg>

definitely one/the best solution, as it only has to initialise a single DOM element — jbutler483, Dec 19 '14 at 09:29
I'd prefer to use a ufll circle, and then add an overflow hidden [like this](http://jsfiddle.net/jbutler483/xpwtwyp8/) — jbutler483, Dec 19 '14 at 09:36
@jbutler483 - This approach has two advantages: 1) The text could be easily aligned to its right by adding `text-align: right`. 2) The :pseudo-element could be easily aligned to the bottom right by simply adding `bottom: 0` and `right: 0`. — Weafs.py, Dec 19 '14 at 13:57

score 3 · Answer 2 · answered Dec 19 '14 at 06:48

3

With absolute position and border radius:

.wrapper {
  width: 200px;
  height: 100px;
  position: relative;
  background-color: green;
}
.info {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: white;
  color: green;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  position: absolute;
  bottom: -7px;
  right: -7px;
}

<div class="wrapper">
  <div class="info">i</div>
</div>

answered Dec 19 '14 at 06:48

Justinas

41,402
5
66
96

1

there really is no need for multiple elements here. Using ::before and /or ::after pseudo effects is more than enough. – jbutler483 Dec 19 '14 at 09:41

score 3 · Answer 3 · answered Dec 19 '14 at 07:27

Apply overflow: hidden and position: relative on the parent the use position: absolute on the pseudo element with border-radius: 50%

:root{background: #333}
.wrapper {
  width: 200px;
  height: 100px;
  position: relative;
  background-color: green;
  overflow: hidden
}
.wrapper:before {
  content:'i';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  color: green;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  bottom: -4px;
  right: -6px;
}

<div class="wrapper"></div>

Why isn't this answer upvoted more? probably the best so far! — jbutler483, Dec 19 '14 at 09:39

Pier-Luc Gendreau · Answer 4 · 2014-12-19T07:07:37.517

2

This solution has the advantage of not using magic values, just some simple positioning. The "i" is in it's own container so it can easily be styled or replaced by an image without fiddling with margins.

The circle is achieved by having the top left border radius equal to the container's width and height.

.square {
  background-color: green;
  width: 200px;
  height: 100px;
  position: relative;
}
.circle {
  background-color: white;
  border-top-left-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.icon {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="square">
  <div class="circle">
    <span class="icon">i</span>
  </div>
</div>

JSFiddle

edited Dec 19 '14 at 07:07

answered Dec 19 '14 at 07:00

Pier-Luc Gendreau

13,553
4
58
69

2

Three elements for such a simple task = overkill! – Weafs.py Dec 19 '14 at 07:12
1

You are entitled to your opinion. Fact is, it makes the styling very simple and flexible. – Pier-Luc Gendreau Dec 19 '14 at 07:25

score 1 · Answer 5 · answered Dec 19 '14 at 07:05

add overflow hidden to box and your inner content position absolute + bottom right

<div class="box">
            <span>i</span>
</div>

.box {
    background-color: green;
    width: 200px;
    height: 100px;
    position: relative;
    overflow:hidden;
}

.box span {
    background-color: white;
    border-top-left-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    line-height:30px;
    text-align:center;
}

buydadip · Answer 6 · 2014-12-19T08:39:41.167

To get the shape of the box, with the inverted border-radius in the bottom-right corner, do the following:

div {
    width: 300px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
div:before {
    content:' ';    // fills div
    position:absolute;
    width:80px;   // width, height, top, left
    height:80px;  // are attributes of inverted
    top:70px;     // border-radius
    left:250px;
    border-radius:100%;
    box-shadow:0 0 0 1000px green; // box shadow creates the illusion
}                                  // of inverted border-radius

Here's the fiddle http://jsfiddle.net/L71euu59/

By playing with the height, width, top, left attributes of div:before, you can resize the border-radius and reposition it to whichever corner of the div you prefer.

score 1 · Answer 7 · answered Dec 19 '14 at 09:47

here another solution :)

#logo {
  width:110px;
  height:72px;
  background-color:#1bc706 ;
  position:relative;
  overflow:hidden;
}
#logo:after{
  content:"i";
  font-family:courier;
  font-weight:bolder;
  text-indent:-13px;
  line-height:10px;
  position:absolute;
  bottom:-15px;
  right:-15px;
  color:#1bc706 ;
  background-color:#fff;
  width:10px;
  height:25px;
  padding-left:25px;
  border-radius:100px;
  padding-top:10px;
}

<div id="logo"></div>

score 0 · Answer 8 · answered Dec 19 '14 at 06:48

0

You should take one DIV and inside it create another DIV align inside's DIV position to most Bottom Right and make its left and upper border as you would like. Change its background color and you will get your image.

answered Dec 19 '14 at 06:48

byteboy

107
1
10

CSS border corner curve backward

8 Answers8