Home › Forums › CSS › is there any possibilities of opposite direction (invert) curve? › Reply To: is there any possibilities of opposite direction (invert) curve?
November 10, 2013 at 6:04 am
#155621
paulob
Participant
Hi,
I’m not quite sure the exact effect you want but you will need to rub the background out with another colour if you wanted the area inside to stay red.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:white }
.roundCorner {
width: 150px;
height: 4px;
padding: 2em;
border: 1px solid;
border-bottom:0;
position:relative;
background:red;
border-radius:1em 1em 0 0;
}
.roundCorner:after {
position:absolute;
left:-1px;
right:-1px;
bottom:0;
height:1.5em;
border:1px solid black;
border-bottom:0;
border-radius:3em 3em 0 0;
content:'';
background:white;
}
</style>
</head>
<body>
<div class="roundCorner"></div>
</body>
</html>
Of course it does only work if the background is a solid colour.