Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS is there any possibilities of opposite direction (invert) curve? Reply To: is there any possibilities of opposite direction (invert) curve?

#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.