2

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
  • 245,468
  • 26
  • 309
  • 415
Mark
  • 2,543
  • 6
  • 33
  • 44

2 Answers2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
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>
Artur Leinweber
  • 256
  • 1
  • 6