Question

I would like to create a special CSS Shape for my header. The have to look like the first speech bubble from this website http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ but, the arrow has to be a half circle and the half circle has to be always in the middle. This is for my header so even if the shape is 100% of the browser’s length the circle has to stay in the middle of the browser, also when I resize the browser window.

So my question is, is that possible and if so, how?

Answer 1

Use border-radius: 50% for the semi-circle, then set the bottom to 1/2 of the circle’s height, left: 50% to center it mostly, and then margin-left to negative 1/2 the width:

.half-circle {
  background: orange;
  padding: 1em;
  position: relative;
  text-align: center;
}
.half-circle::after {
  background: orange;
  border-radius: 50%;
  bottom: -10px;
  content: '';
  display: block;
  height: 20px;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 20px;
}​

Here’s the fiddle