Complex CSS Shape

Question

I need some CSS help. It’s hard to explain, but looking at the snippet I need the black part without the red.

I used two elements, but it should be possible with one...

.q-rounder {
  background: #222;
  width: 15px;
  height: 15px;
}

.quarter-circle {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 100px 0 0 0;
  -moz-border-radius: 100px 0 0 0;
  -webkit-border-radius: 100px 0 0 0;
}

<div class="q-rounder">
  <div class="quarter-circle"></div>
</div>

(fiddle)

Temani Afif · Accepted Answer · 2019-03-01 23:05:26Z

4

Use a radial gradient as background

.q-rounder {
  background: 
    radial-gradient(farthest-side at bottom right,transparent 94%, #222);
  width: 15px;
  height: 15px;
}

<div class="q-rounder">
</div>

Another syntax with the at to have better support (safari doesn't support the at)

.q-rounder {
  background: 
    radial-gradient(farthest-side,transparent 94%, #222) top left/200% 200%;
  width: 15px;
  height: 15px;
}

<div class="q-rounder">
</div>

edited Mar 1, 2019 at 23:05

answered Mar 1, 2019 at 22:58

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Artur Leinweber · Accepted Answer · 2019-03-01 23:21:10Z

1

If you can use a solid background color, maybe this fits for you?

basicaly the before elements lays behind an rectangle which has border-radius an a solid background-color.

Supported in every browser and version.

.q-rounder {
  position: relative;
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 100px 0 0 0;
}

.q-rounder:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background: black;
  content: "";
  z-index: -1;
}

<div class="q-rounder">

</div>

answered Mar 1, 2019 at 23:21

Artur Leinweber

2561 silver badge6 bronze badges

4 Comments

Temani Afif Over a year ago

it's almost the same as he already did, you simply changed the red with white. I think the idea is to have transparency

Artur Leinweber Over a year ago

if transparency not needed, my approach has more browser support :D

Temani Afif Over a year ago

more browser support than what? and if transparency is not need then the OP already have his code, no?

Artur Leinweber Over a year ago

he asked for a solution with just one element

Collectives™ on Stack Overflow

Complex CSS Shape

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related