How to make inverted rounded corners and bend content to follow curved container
You should post also complete code, it is not always enough with CSS. (Enlico already commented this to you).
Anyway, a posible solution would be this, moving the elements in a vertical amount to make them rotate:
.container {
width: 100%;
position: relative;
top: 200px;
}
.element {
position: absolute;
background-color: tomato;
left: 50%;
transform: translateY(-400px) rotate(var(--angle)) translateY(400px) rotate(calc(-1 * var(--angle)));
}
.element:nth-child(1) {
--angle: 50deg;
}
.element:nth-child(2) {
--angle: 30deg;
}
.element:nth-child(3) {
--angle: 10deg;
}
.element:nth-child(4) {
--angle: -10deg;
}
.element:nth-child(5) {
--angle: -30deg;
}
.element:nth-child(6) {
--angle: -50deg;
}
<div class="container">
<div class="element">item 1</div>
<div class="element">item 2</div>
<div class="element">item 3</div>
<div class="element">item 4</div>
<div class="element">item 5</div>
<div class="element">item 6</div>
</div>
CSS3 Inverted Rounded Corner
Well, this is pure madness, but certainly there are ways to achieve this :-) not cross-browserly, but let's see:
Our mark-up:
<div id="bubble">
<p>This is madness!</p>
</div>
Our CSS:
#bubble {
width:200px;
height:100px;
border:1px solid #000;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
#bubble p {
margin: 1em;
font-family:Comic Sans MS;/* well, madness it is! */
}
#bubble:before {
content:'';
border:20px solid;
border-color:#fff transparent transparent;
position:absolute;
top:110px;
left:25px;
z-index:2;
}
#bubble:after {
content:'';
border:20px solid;
border-color:#000 transparent transparent;
position:absolute;
top:111px;
left:25px;
z-index:1;
}
The result:
http://jsfiddle.net/MrLWY/
I have only tested this in Firefox 3.6.3, but the idea is clear :-)
Here is take two:
#bubble {
width:200px;
height:100px;
border:1px solid #000;
position:relative;
-webkit-border-radius:20px 20px 20px 0;
-moz-border-radius:20px 20px 20px 0;
border-radius:20px 20px 20px 0;
}
#bubble p {
margin: 1em;
font-family:Comic Sans MS;
}
#bubble:before {
content:'';
width:20px;
height:20px;
background:#fff;
border-left:1px solid #000;
position:absolute;
top:100px;
left:-1px;
}
#bubble:after {
content:'';
-webkit-border-radius:20px 0 0 0;
-moz-border-radius:20px 0 0 0;
border-radius:20px 0 0 0;
border:solid #000;
border-width:1px 0 0 1px;
width:20px;
height:19px;
position:absolute;
top:100px;
left:0;
}
And the result: http://jsfiddle.net/ajeN7/
Perhaps this can be enhanced in many ways:
- make it cross-browser (+webkit and opera, at least)
- it could work in IEs, without roundings, though, with help of something like that http://code.google.com/p/ie7-js/ (in order for generated content to work).
- to find out how it could work with flexible height.
- to change the font-family declaration :-)
How to use inverted border-radius?
Just use before and add an element to style
div {
position: relative;
display: inline-block;
background-color: blue;
width: 10em;
height: 10em;
}
div::before{
display: block;
position: relative;
content: '';
width: 10%;
top: 15%;
height: 70%;
background-color: white;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
<div></div>
Inverted' border-radius possible?
Not using the native border-radius
. As mentioned on MDN "Negative values are invalid". You could definitely look for a library out there which does this for you automatically (though I find the approach taken in Philip's suggested library to be particularly outdated).
Using pure CSS I have come up with an approach. The idea is to add 4 extra elements inside your container, set their background to the same color as your page background (so this will not let page content underneath filter through – for that, you’d need SVG masking or similar), and to position
them in such a way that they lie just outside of the element itself. We then apply a border-radius
which gives the affect:
#main {
margin: 40px;
height: 100px;
background-color: #004C80;
position: relative;
overflow: hidden;
}
#main div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFF;
}
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }
<div id="main">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
CSS - Inverted border radius to draw a rounded corner
You can use pseudoelements to created rounded fragments and "clipped" borders.
.flex {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.flex > * {
height: 50px;
position: relative;
display: flex;
align-items: center;
}
.flex > *:before {
content: "";
position: absolute;
display: inline-block;
top: 10px;
bottom: 0px;
left: -90px;
width: 90px;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-bottom-right-radius: 10px;
}
.flex > *:after {
content: "";
position: absolute;
display: inline-block;
top: -2px;
height: 10px;
left: 0px;
width: 10px;
border-left: 2px solid red;
border-top: 2px solid red;
border-top-left-radius: 10px;
}
.flex > .one {
width: 100px;
}
.flex > .two {
width: 200px;
}
.flex > .three {
width: 300px;
}
.flex > .four {
width: 400px;
}
.degrees {
/* circle styles */
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid red;
/* styles for centering */
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
}
<div class="flex">
<div class="one">
<div class="degrees">1°</div>
</div>
<div class="two">
<div class="degrees">2°</div>
</div>
<div class="three">
<div class="degrees">3°</div>
</div>
<div class="four">
<div class="degrees">4°</div>
</div>
</div>
CSS negative triangle with inverted rounded corner
Yes, it is possible to achieve this effect by using two pseudo-elements. We need to position one of the pseudo-elements with respect to the left of the container while other is positioned with respect to right of the container. Then by adding a transform: skew()
on them in opposite directions and assigning a border-radius to the required sides we can get the required output.
div {
position: relative;
height: 50px;
width: 100%;
padding-top: 50px;
background: blue;
background-clip: content-box;
/* make sure blue background doesn't appear behind triangle */
overflow: hidden;
color: white;
}
div:before,
div:after {
position: absolute;
content: '';
top: 0;
width: calc(50% + 10px);
/* don't change */
height: 50px;
/* must be equal to padding-top */
background: blue;
}
div:before {
left: 0;
transform: skew(45deg);
transform-origin: right bottom;
border-top-right-radius: 12px;
}
div:after {
right: 0;
transform: skew(-45deg);
transform-origin: left bottom;
border-top-left-radius: 12px;
}
<div class='shape'>This is a shape.</div>
Inverted Scooped corners using CSS
You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
}
#box::before,
#box::after {
content: "";
width: 20px;
height: 20px;
right: 0;
position: absolute;
}
#box::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
bottom: -20px;
}
#box::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
top: -20px;
}
<div id="box"></div>
Related Topics
Vertically Center in Viewport Using CSS
How to Get a Negative Value of a CSS Variables in a Calc() Expression
CSS Styling Won't Work in Outlook 2010
Apply a CSS Filter Only on Background
How to Send an Inner <Div> to the Bottom of Its Parent <Div>
Line-Height as a Percentage Not Working
How to Standardize the Height of a Select Box Between Chrome and Firefox
How to Convert Markdown + CSS -> PDF
What Is the Benefit of Using Withstyles Over Makestyles
What Are Good Uses of the CSS 'Content' Property
Invalid Property Value on Background-Image
Does IE9 Not Support Display: Inline-Flex at All
Do Double Forward Slashes Direct Ie to Use Specific CSS
Nested Rows with Bootstrap Grid System
Removing the Ie10 Select Element Arrow