All geek questions in one place

Is it possible to use CSS arch using a border radius?

I am trying to create an arch using only CSS. I looked at various border-radius insertion issues, but they all show how to insert corners, not the middle part of an object.

I am looking for a way to invert the middle of an object to create an arch like a bridge.

Included is a sample image showing what I'm trying to achieve. enter image description here

Edit:

An important part of this arch is that it will be placed above other objects. Just whitening is not a solution, but just a temporary hack. See image below for details.

enter image description here

+5
source share
5 answers

You can perform radial gradients. Ive set an example on JSFiddle: http://jsfiddle.net/17ohey9h/

The basic idea is to have a large overlay (generated content anchored to the container using overflow: hidden ), and then give it a radial gradient background with a hard stop for the transition. We can do this by setting two stops in the same position, but with the opposite transparency:

 radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%)

Obviously, you can play with colors and positions, the general idea holds. Ive also provided only W3C syntax for this. You need to add older versions, depending on how far back your browser support is required.

+7
source

Given the images you posted, you might consider a different approach to this, for example: http://codepen.io/pageaffairs/pen/lpLHg

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div {background: red; padding-top: 100px; width: 400px; text-align: center; overflow: hidden;} img {border-radius: 200px/30px ; display: block; margin: 0 0 -30px -10px;} </style> </head> <body> <div> <img src="http://placeimg.com/420/420/any"> </div> </body> </html>
+2
source

Another way to solve this problem is using box-shadow

 .overlay::after { content: ""; position: absolute; width: 100%; height: 50%; top: 30px; border-radius: 50%; box-shadow: 0px -100px 0px 72px red; }

fiddle

Reusing violin Robin :-)

+2
source

Html:

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

CSS:

 .wrapper { width:200px; height:100px; overflow:hidden; position:relative; } .rectangle{ width:200px; height:100px; background-color:red; } .egg { width:200px; height:100px; border-radius:50%; background-color:#fff; position:absolute; top:56px; }

and fiddle: http://jsfiddle.net/h1gjefk7/

0
source

You can do it like this: http://codepen.io/pageaffairs/pen/wpaFm

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 230px; height: 120px; background: red; position: relative; overflow: hidden; } div:after { content:""; width: 260px; height: 50px; background: #fff; border-radius: 100% 100% 0 0; position: absolute; bottom:0; left: -15px; } </style> </head> <body> <div></div> </body> </html>
0
source

Source: https://habr.com/ru/post/1201076/

More articles:


All Articles