This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
CSS shape with inset curve and transparent background
(2 answers)
Closed 6 years ago.
How i can make this shape with keeping the inside rounded area transparent?
Here example for what i want to implement: http://codepen.io/moradxd/pen/EgVVdg
body {
background: #16c5de;
}
.shape-box {
width: 80px;
height: 80px;
position: relative;
margin: 100px auto;
}
.element-1,
.element-2 {
display: block;
position: relative;
}
.element-1 {
width: 80px;
height: 40px;
background: #fff;
position: absolute;
bottom: 0;
z-index: 0;
}
.element-2 {
width: 80px;
height: 80px;
background: #16c5de;
z-index: 1;
border-radius: 100%;
}
<div class="shape-box">
<span class="element-1"></span>
<span class="element-2"></span>
</div><!-- .shape-box -->
You can try :before or :after pseudo element and box-shadow as shown below.
body {
background: #007aff;
padding: 40px;
margin: 0;
}
.box {
position: relative;
overflow: hidden;
height: 100px;
width: 100px;
}
.box:before {
box-shadow: 0 0 0 100px #fff;
position: absolute;
border-radius: 100%;
margin-left: -60px;
height: 200px;
content: '';
width: 120px;
left: 50%;
bottom: 0;
}
<div class="box"></div>
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I wanted to experiment with ::after, so I made three figures (square, circle and triangle) then put their respective after, and works fine with the circle and square however with the triangle makes a gap and I don't understand why, I tried changing the positions and displays attributes but it didn't work
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 28.5%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
You can remove the gap by setting the height to 0px
note: I also set left: 48% just to make the triangulo word in the center
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
height: 0px; /* << here */
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 48%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
This question already has answers here:
Wavy shape with css
(7 answers)
Closed 4 years ago.
I want to replicate an image effect. On this page https://inventi.studio/en you can see some div containers with "waves". The curved effect is achieved by uploading an image as a background.
So this is what I currently have
#box {
height: 200px;
background-image: linear-gradient(135deg, #47b784, #009d90 26%, #00818e 50%, #25647b 74%, #36495d);
}
<div id="box">
</div>
<div id="page">
Content starts here
</div>
and this is what I tried to achieve
#wave {
position: relative;
height: 70px;
width: 600px;
background: #47b784;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #47b784;
left: 0;
top: 27px;
}
<div id="wave">
</div>
<div id="page">
content starts here
</div>
but as you can see the div below the curved div gets covered. I am trying to achieve this effect with one single div container that is not overlapping other ones.
How can I achieve this with one div container and no image as a background?
Can you not just add padding top to page equal to the top of the wave before?
#wave {
position: relative;
height: 70px;
width: 600px;
background: #47b784;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: 0;
top: 39px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #47b784;
left: 0;
top: 27px;
}
#page {
padding-top: 40px;
}
<div id="wave">
</div>
<div id="page">
content starts here
</div>
This question already has answers here:
one sided skew with css
(2 answers)
Closed 4 years ago.
I am trying to make a div element to look like this:
So how can I apply the skew transform property so that only one side(the bottom one here) gets tilted?
Try this code
a {
color: white;
}
.title {
position: relative;
width: 120px;
padding: 45px 20px 10px 10px;
font-size: 20px;
position: relative;
color: #FFF;
background: Grey;
}
.title:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 230%;
top: 0;
left: 0;
z-index: -1;
background: Grey;
transform-origin: bottom right;
transform: skew(0deg,-20deg);
}
<div class="title">
</div>
You can a triangle using the border trick on a ::before pseudo element.
div {
position: relative;
padding: 30px;
background-color: gray;
width: 30px;
}
div::before {
position: absolute;
content: '';
bottom: -120px;
right: 0;
width: 0;
height: 0;
border-top: 60px solid gray;
border-bottom: 60px solid transparent;
border-right: 90px solid transparent;
}
<div>Hello world</div>
This question already has answers here:
Inset border-radius with CSS3
(8 answers)
Closed 6 years ago.
Please help me out i want to make a div like this
Method # 01:
Use raidal-gradient:
body {
background: #f0f0f0;
margin: 0;
}
.box {
background: radial-gradient(circle at bottom right, transparent 60px, #000 60px);
height: 150px;
width: 250px;
}
<div class="box"></div>
Method # 02:
You can create it with combination of :before or :after pseudo element and box-shadow css property.
body {
background: #f0f0f0;
margin: 0;
}
.box {
position: relative;
overflow: hidden;
height: 150px;
width: 250px;
}
.box:before {
box-shadow: 0 0 0 1000px #000;
border-radius: 100%;
position: absolute;
bottom: -30px;
height: 100px;
right: -35px;
width: 100px;
z-index: -1;
content: '';
}
<div class="box"></div>
The easiest method will be using a pseudo element. By absolutely positioning the :after element, you can get the desired effect.
.box {
background: #000;
width: 300px;
height: 150px;
position: relative;
}
.box:after {
content: '';
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: #fff;
right: -75px;
bottom: -75px;
}
<div class="box"></div>
Try this CSS,
.rec{
height: 200px;
background: black;
position: relative;
width:600px;
}
.rec:after {
content: '';
position: absolute;
bottom: -20px; right: -20px;
border-bottom: 100px solid white;
border-left: 100px solid white;
width: 0;
background:#fff;
border-radius:150px;
}
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/