I am trying to make a hollow ( transparent on the inside ) inverted pentagon like this:
Inverted Pentagon
I have attempted to do this using the following css:
.pentagon {
border: solid 86px #E44126;
border-bottom: none;
width: 100%;
height: 60%;
position: absolute;
}
.pentagon:before {
content: "";
position: absolute;
top: 100%;
right: 0px;
width: 50%;
height: 100px;
background: -webkit-linear-gradient(to right bottom, transparent 50%, #E44126 50%,);
background: linear-gradient(to right bottom, transparent 50%, #E44126 50%);
}
.pentagon:after {
content: "";
position: absolute;
top: 100%;
left: 0px;
width: 50%;
height: 100px;
background: -webkit-linear-gradient(to right bottom, transparent 50%, #E44126 50%);
background: linear-gradient(to left bottom, transparent 50%, #E44126 50%);
}
But I just can figure it out. I thought about using clip-path but there is no browser support for IE.
Here is a go at it but using a rotation instead. Values can be tweaked for width/height/border size. http://codepen.io/anon/pen/KWqEqL
* {
box-sizing: border-box;
}
.container {
width: 100px;
height: 100px;
position: relative;
}
.pentagon {
border: solid 5px #E44126;
border-bottom: none;
width: 100%;
height: 50%;
}
.pentagon:before {
content: '';
display: inline-block;
width: 65%;
height: 65%;
border: 5px solid #E44126;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
border-top: 0;
border-left: 0;
}
HTML:
<div class="container"><div class="pentagon"></div></div>
Related
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
I'm new here so if I added the wrong post then sorry. I have a problem with styling a multicolored background that ends with a triangle. Below I am pasting what I managed to create. How to write it correctly in CSS? I am enclosing a graphic of how it should look like.
#wrapper {
display:flex;
}
#triangle-multicolor-box1 {
width: 150px;
height: 100px;
position: relative;
background: #007f9f;
}
#triangle-multicolor-box1:before {
content: "";
position: absolute;
right: -50px;
bottom: 0;
width: 0;
height: 0;
border-left: 50px solid #007f9f;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#triangle-multicolor-box2 {
width: 150px;
height: 100px;
position: relative;
background: #0298bb;
}
#triangle-multicolor-box2:before {
content: "";
position: absolute;
right: -50px;
bottom: 0;
width: 0;
height: 0;
border-left: 50px solid #0298bb;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#triangle-multicolor-box3 {
width: 150px;
height: 100px;
position: relative;
background: #01acd7;
}
#triangle-multicolor-box3:before {
content: "";
position: absolute;
right: -50px;
bottom: 0;
width: 0;
height: 0;
border-left: 50px solid #01acd7;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
<div id="wrapper">
<div id="triangle-multicolor-box1"></div>
<div id="triangle-multicolor-box2"></div>
<div id="triangle-multicolor-box3"></div>
</div>
Triangle multicolor background
The trick here is z-index for the correct position of each element see example:
#wrapper {
display:flex;
}
#triangle-multicolor-box1 {
width: 150px;
height: 100px;
position: relative;
background: #007f9f;
}
#triangle-multicolor-box1:before {
content: "";
position: absolute;
right: -50px;
bottom: 0;
width: 0;
height: 0;
border-left: 50px solid #007f9f;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
z-index:2;
}
#triangle-multicolor-box2 {
width: 150px;
height: 100px;
position: relative;
background: #0298bb;
}
#triangle-multicolor-box2:before {
content: "";
position: absolute;
right: -50px;
bottom: 0;
width: 0;
height: 0;
border-left: 50px solid #0298bb;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
z-index:1;
}
#triangle-multicolor-box3 {
width: 150px;
height: 100px;
position: relative;
background: #01acd7;
}
<div id="wrapper">
<div id="triangle-multicolor-box1"></div>
<div id="triangle-multicolor-box2"></div>
<div id="triangle-multicolor-box3"></div>
</div>
Already answered, but for info if you are curious to find other ways
2 other possibilities:
linear-gradient can be useful once in a while:
#wrapper {
display: flex;
margin: 1em;
width: max-content;
/*shrink to content */
background: linear-gradient( 45deg, #007f9f 30%, #0298bb 30%, #0298bb 60%, #01acd7 60%, #01acd7 89.5%, #0000 90%) 0 0 / 100% 50% no-repeat, linear-gradient( 135deg, #007f9f 30%, #0298bb 30%, #0298bb 60%, #01acd7 60%, #01acd7 89.5%, #0000 90%) 0 100% / 100% 50% no-repeat;
}
#wrapper:hover {
filter: drop-shadow( 0px 0px 3px #000)
}
div div {
display: flex;
align-items: center;
width: 150px;
height: 100px;
}
<div id="wrapper">
<div id="triangle-multicolor-box1">hello</div>
<div id="triangle-multicolor-box2">the</div>
<div id="triangle-multicolor-box3">world</div>
</div>
clip-path
#wrapper {
display: flex;
margin: 1em;
}
#wrapper:hover {/* for infos*/
filter: drop-shadow( 0px 0px 3px #000)
}
#wrapper>div {
padding-left: 50px;
margin-left: -50px;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
body>div {}
div div {
display: flex;
align-items: center;
}
#wrapper>#triangle-multicolor-box1 {
padding: 0;
width: 150px;
height: 100px;
position: relative;
margin: 0;
background: #007f9f;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%, 0% 0%);
}
#triangle-multicolor-box2 {
width: 150px;
height: 100px;
position: relative;
background: #0298bb;
}
#triangle-multicolor-box3 {
width: 150px;
height: 100px;
position: relative;
background: #01acd7;
}
<div id="wrapper">
<div id="triangle-multicolor-box1">hello</div>
<div id="triangle-multicolor-box2">the</div>
<div id="triangle-multicolor-box3">world</div>
</div>
As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it?
Here is my code:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
An idea using transformation and perspective where you will have the border, border-radius also the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can also add the shadow and easily change the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can do it with clip-path. There is a really simple tool that could help you: https://bennettfeely.com/clippy/.
I've made an example for you with your content:
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I know what you're thinking, there's at least a million questions like this, asking about waves in borders, or waves at the edges of elements. However, I have a different question. What I need is a combination between a zigzag-edge (I have no idea how to call it, I'm not English) and a wave-edge.
More specific: I need to create this:
The top part of the blue element has to be a wavy kind of border, where the top part is transparent so the underlying image shows 'through the element', so to say.
Is this do-able with CSS? I'd rather not use images, simply because there will be multiple elements like these, with different colours (that means different edge colours per element).
It's relatively easy to draw a border like that with a couple of pseudo-elements.
First we draw the bottom of the wave:
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, maroon 13px);
}
<div class='wave'></div>
We then fill every other ditch with the background of another pseudo-element. This background is twice as wide so we only fill the odd ditches.
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, crimson 12px, transparent 13px);
}
<div class='wave'></div>
Combining the two gives us the desired effect:
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, aquamarine 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}
<div class='wave'></div>
Updated with a flatter wave.
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before, .wave::after{
border-bottom: 5px solid yellow;
}
.wave::before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-size: 20px 40px;
background-image:
radial-gradient(circle at 10px -15px, transparent 20px, yellow 21px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
background-size: 40px 40px;
background-image:
radial-gradient(circle at 10px 26px, yellow 20px, transparent 21px);
}
<div class='wave'></div>
Try-
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div><div id="wave"></div>
css question.
Is it possible to add a gradient to a border that reflects to the div above?
I can add a solid color, cannot seem to find something for a gradient.
current status
.offerBox {
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%,#f9c100 100%);
}
.offerBox:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #f9c100;
border-width: 30px;
margin-left: -30px;
}
<div class="offerBox"></div>
Thanks!
You can remove border and apply gradient to :after background
use transform: rotate(45deg); to give it the triangle look.
and z-index: -1; will push it below the offer div.
.offerBox:after {
top: calc(100% - 15px);
left: 50%;
content: " ";
height: 30px;
width: 30px;
position: absolute;
pointer-events: none;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
margin-left: -30px;
transform: rotate(45deg);
z-index: -1;
}
SNIPPET
.offerBox {
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
}
.offerBox:after {
top: calc(100% - 15px);
left: 50%;
content: " ";
height: 30px;
width: 30px;
position: absolute;
pointer-events: none;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
margin-left: -30px;
transform: rotate(45deg);
z-index: -1;
}
<div class="offerBox"></div>
You can use as a background, you can change color of gradient as you need. if you need align center bottom you can usetransform:rotate(45deg) translate(-50%, 0); in .offerBox:afterand update top as you need
.offerBox {
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
}
.offerBox:after {
top: 95%;
left: 50%;
content: " ";
display: block;
height: 30px;
width: 30px;
background: linear-gradient(to right, tomato 50%, green 100%);
position: absolute;
pointer-events: none;
z-index: -1;
transform: rotate(45deg) translate(-50%, 0);
}
<div class="offerBox"></div>
A possible way to solve your problem : using :before and :after to draw a "box footer" using skew to make a triangle, so that you have a responsive and accurate background gradient.
.offerBox {
position relative;
width: 360px;
height: 170px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #fcd651 0%, #f9c100 100%);
}
.offerBox:before {
position: absolute;
bottom: -5px;
left: -10px;
content: " ";
height: 30px;
width: 50%;
pointer-events: none;
background: white;
transform: skew(45deg);
}
.offerBox:after {
position: absolute;
bottom: -5px;
right: -10px;
content: " ";
height: 30px;
width: 50%;
pointer-events: none;
background: white;
transform: skew(-45deg);
}
<div class="offerBox"></div>