I have a striped black diamond using the class diamond (see fiddle here):
.diamond {
border: 8px solid black;
overflow: hidden;
position: relative;
margin: 0 auto;
padding: 12%;
width: 0;
-webkit-transform: scaleY(0.5) rotate(45deg);
}
.diamond:before {
position: absolute;
top: 0;
right: -37.5%;
bottom: 0;
left: -37.5%;
background: -webkit-linear-gradient(black 50%, transparent 50%);
-webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
background-size: 10px;
content: '';
}
Now I want a class red that will make the diamond red, both the border and the stripes. I have managed to impose a red border, but not the red stripes. How can I modify the CSS for .red such that the stripes become red?
.diamond {
border: 8px solid black;
overflow: hidden;
position: relative;
margin: 0 auto;
padding: 12%;
width: 0;
-webkit-transform: scaleY(0.5) rotate(45deg);
}
.diamond:before {
position: absolute;
top: 0;
right: -37.5%;
bottom: 0;
left: -37.5%;
background: -webkit-linear-gradient(black 50%, transparent 50%);
-webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
background-size: 10px;
content: '';
}
.red {
border-color: crimson !important;
}
.red:before {
background-image: -webkit-linear-gradient(red 50%, transparent 50%);
}
Fiddle http://jsfiddle.net/UQQMz/1/
Your problem is the order of precedence. The red class is handled before the diamond class because it appears in the CSS first. Move the red classes below the diamond class to fix your problem.
Related
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>
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>
Is it possible to do something like this with CSS? Basically make half the circle one color and the other half another color?
A linear-gradient will do that, and use border-radius to make it a circle.
div {
width: 50vw;
height: 50vw;
background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% );
border-radius: 50%;
}
<div></div>
You can do something like this:
div {
border-radius: 50px;
border-right-color: red;
border-top-color: blue;
border-bottom-color: red;
border-left-color: blue;
border-width: 50px;
border-style: solid;
height: 0px;
width: 0px;
}
<div>
</div>
You can use :before and :after pseudo-elements for each half of circle and also add transform: rotate() on parent element.
.circle {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
transform: rotate(25deg);
}
.circle:after, .circle:before {
content: '';
position: absolute;
height: 100%;
width: 50%;
}
.circle:after {
background: #02FBFD;
left: -2px;
}
.circle:before {
background: #FE0103;
right: -2px;
}
<div class="circle"></div>
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>
I'm trying to replicate the following shape with no success:
I'm guessing I'll need some :before and :after pseudo elements along with the following css:
#pentagon {
position: relative;
width: 78px;
height:50px;
background:#3a93d0;
}
Using Border Method:
You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method.
.pentagon {
height: 50px;
width: 78px;
background: #3a93d0;
position: relative;
}
.pentagon:after {
border: 39px solid #3a93d0;
border-top-width: 15px;
border-color: #3a93d0 transparent transparent transparent;
position: absolute;
top: 50px;
content: '';
}
<div class="pentagon"></div>
Using CSS Transforms:
This approach uses rotate, skewX and hence would need a fully CSS3 compliant browser to work properly. The advantage of this approach is that it allows borders to be added around the shape unlike when using border method. The drawback is that it needs additional calculations for the angles.
It is a modified version of the short triangle method mentioned in this CodePen demo by web-tiki.
.pentagon {
position: relative;
height: 50px;
width: 78px;
background: #3a93d0;
}
.pentagon:before {
position: absolute;
content: '';
top: 12px;
left: 0;
width: 46px;
height: 38px;
background: #3a93d0;
transform-origin: 0 100%;
transform: rotate(29deg) skewX(-30deg);
}
.pentagon.bordered {
background: white;
border: 1px solid #3a93d0;
}
.pentagon.bordered:before {
width: 44px;
height: 37px;
background: white;
border: 1px solid #3a93d0;
border-color: transparent #3a93d0 #3a93d0 transparent;
transform: rotate(29deg) skewX(-30deg);
}
/* Just for demo */
.pentagon {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="pentagon"></div>
<div class="pentagon bordered"></div>
Using CSS Skew Transforms:
This approach uses just skew() (along both X and Y axes) and does not need any complex angle calculations. It just needs the dimensions and position of the pseudo-element to be adjusted as the dimension of the parent changes.
.pentagon {
position: relative;
height: 50px;
width: 78px;
border: 1px solid #3a93d0;
border-bottom: none;
background: aliceblue;
}
.pentagon:before {
position: absolute;
content: '';
top: 10px; /* parent height - child height -1px */
left: -1px;
width: 39px;
height: 39px; /* width of parent/2 */
border-right: 1px solid #3a93d0;
border-bottom: 1px solid #3a93d0;
background: aliceblue;
transform-origin: 0 100%;
transform: matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0);
}
<div class="pentagon">
</div>
The above snippet uses matrix transform because as per MDN, the skew(x, y) is removed and should not be used anymore. The Matrix Resolutions site can be used to obtain the equivalent matrix function. The matrix function for rotate(45deg) skew(-22.5deg, -22.5deg) is
matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0).
Using Clip Path:
Here is another approach to creating the pentagon shape with clip-path. Either a pure CSS clip-path or one with inline SVG can be used depending on required browser support. CSS clip-path is supported only by Webkit browsers at present.
IE (all versions) do not support either the CSS or the SVG clip-path.
.pentagon {
position: relative;
width: 75px;
height: calc(75px / 1.414);
background: #3a93d0;
}
.pentagon.css {
-webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
.pentagon.bordered:after {
position: absolute;
content: '';
height: calc(100% - 2px);
width: calc(100% - 2px);
left: 1px;
top: 1px;
background: white;
}
.pentagon.css.bordered:after {
-webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg.bordered:after {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
/* Just for demo */
.pentagon {
margin: 10px;
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0,0 0,0.66 0.5,1 1,0.66 1,0z" />
</clipPath>
</defs>
</svg>
<h3>CSS Clip Path</h3>
<div class="pentagon css"></div>
<div class="pentagon bordered css"></div>
<h3>SVG Clip Path</h3>
<div class="pentagon svg"></div>
<div class="pentagon bordered svg"></div>
You can try an alternate approach using transform scaleX and rotate: 45deg;. This makes it very easy to create the bottom part of the shape.
transform: scaleX() rotate(45deg);
Working
*sorry for bad quality gif! :(
Sans border:
Fiddle
#pent{
height: 50px;
width: 100px;
position: relative;
background-color: deepskyblue;
}
#pent:before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width:45px;
height:45px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(1.57) rotate(45deg);
-moz-transform: scaleX(1.57) rotate(45deg);
-ms-transform: scaleX(1.57) rotate(45deg);
transform: scaleX(1.57) rotate(45deg);
background-color: deepskyblue;
}
<div id="pent"></div>
With border :
Fiddle
#pent{
height: 50px;
width: 100px;
position: relative;
border: 1px solid black;
border-bottom: 0;
}
#pent:before{
content: '';
position: absolute;
bottom: 0;
left: -1px;
width:45px;
height:45px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(1.57) rotate(45deg);
-moz-transform: scaleX(1.57) rotate(45deg);
-ms-transform: scaleX(1.57) rotate(45deg);
transform: scaleX(1.57) rotate(45deg);
border: 1px solid black;
border-top: 0;
border-left: 0;
}
<div id="pent"></div>
See a demo - basically it uses css triangles and a pseudo element to give a place for the triangle.
.shape {
position: relative;
width: 78px;
height:30px;
background:#3a93d0;
}
.shape:after {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 39px 0 39px;
border-color: #3a93d0 transparent transparent transparent;
}
<style>
#pentagon
{
position: relative;
width: 54px;
border-width: 40px 18px 0;
border-style: solid;
border-color: #3a93d0;
}
#pentagon:after {
border-color: #3a93d0 transparent transparent;
border-style: solid;
border-width: 21px 45px 0;
content: "";
height: 0;
left: -17px;
position: absolute;
top: 0;
width: 0;
}
</style>
if you dont want to use css3 you can do it with css
only problem is this implementation is not responsive. :(
<pre>
<div class="moregrey"></div>
<div class="arrowdown"></div>
.moregrey
{
width: 1000px;
height: 30px;
background: #3f3f40;
}
.arrowdown
{
border-top:50px solid #3f3f40;
border-left:500px solid transparent;
border-bottom:500px solid transparent;
border-right:500px solid transparent;
display:block;
width:0px;
height:10px;
}
</pre>
<pre>
http://jsfiddle.net/jmqoj5nh/1/
</pre>