I am a little confused at the minute I have this code:
HTML:
<div class="ms-layer ms-caption chevron">97.2%</div>
CSS:
.chevron {
position: relative;
top: 5px !important;
text-align: center;
padding: 10px;
margin-bottom: 6px;
height: 200px;
width: 200px;
color: red;
font-size: 6em;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: blue;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
.chevron:after {
content: '';
position: relative;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: blue;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
Now as you can see the chevron is made up of two parts, the before and after classes.
The issue I am having is that the text I have added to the div sits behind the chevron however I want it to sit on top. I haven't really used CSS shapes before so I am a little baffled to why it isn't working.
As you can see I have made one side of the div position as absolute and the other as relative and it has made a difference but hasn't solved the problem.
Any help would be great thanks :)
try this code
.chevron:before {
background: none repeat scroll 0 0 blue;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
transform: skew(0deg, -6deg);
width: 50%;
z-index: -1;
}
<div class="ms-layer ms-caption chevron"><span>97.2%</span></div>
.chevron span {
position:relative;
z-index:2;
}
If you don't want to change your dom structure, add z-index:-1 to .chevron:before
Use z-index:5;
Z-index will help you display anything in the front.
Perhaps add a z-index to the css for .chevon
Do you have this showing somewhere?
have your chevron:before class behind it.
just add z-index:-1;
this will set the shape behind the text
Related
I am new to front-end developer and I am learning css basics , I can understand the following code
#twelve-point-star {
height: 100px;
width: 100px;
margin: 30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<p>twelve point star</p>
<div id="twelve-point-star"></div>
We have created a different kind of triangle and rotate that position to achieve this position. But what purpose we used :before and :after ?
See...you need total 12 stars. If you apply css only #twelve-point-star, you will get 4 corners...you need 8 corners more...For that you have used the :before to get 4 corners more and :after to get final 4 corners pseudo classes to get total 12 corners..
Try to change the color you will see the real visual.
Stack Snippet
#twelve-point-star {
height: 100px;
width: 100px;
margin:30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: red;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: black;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<body>
<p>
twelve point star
</p>
<div id="twelve-point-star">
</div>
</body>
Reference Link
::before
::after
:before
means that before every #twelve-point-star, the css in #twelve-point-star:before will be applied to #twelve-point-star. Likewise for :after, except that it is place after every #twelve-point-star. So what happens in the code is that you basically make 3 squares that are rotated in different directions, which creates that effect.
W3schools is a great source for you to learn css.
How to make a 3 div with distortion, as shown in the picture?
I have made this:
.cars {
width: 100%;
height: 500px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000
}
.car:nth-child(3) {
background: #ff0000
}
<div class="cars">
<div class="car"></div>
<div class="car"></div>
<div class="car"></div>
</div>
jsFiddle
Left div - left corner straight, right corner slanted
Center div - left and right corner slanted
Right div - left corner slanted, right corner straight
I have used CSS's :after pseudo class to add another red box after the last, slanted one. However this one isn't slanted, thus 'filling in' the bit of the slant that you don't want:
.car:nth-child(3):after {
/* create the box */
content: "";
display: block;
/* make it fill the required space */
width: 80%; /* (this is only 80 because it was a bit large at 100) */
height: 100%;
background: #ff0000;
/* transform it in the opposite direction to counter the -10deg skew of .car */
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -20%; /* counteract the 80% width */
}
I did the same with the first div, and :before:
.car:nth-child(3):before{
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.cars {
width: 100%;
height: 500px;
margin-left: 100px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000;
}
.car:nth-child(3) {
background: #ff0000;
}
.car:nth-child(3):after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #ff0000;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.car:nth-child(1):before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
<div class="cars">
<div class="car first"></div>
<div class="car"></div>
<div class="car last"></div>
</div>
<br><br>
I have based this chevron off some code from here, and changed it to use it as navigation in a carousel. However, I'm struggling to center it in the gray area. Preferably it would be centered horizontally with a little padding to the edges.
I tried to wrap the chevron in another div, but with no success.
.chevron {
position: absolute;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 44px;
width: 109px;
top: 242px;
background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
background: blue;
}
.chevron {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.chevron:before,
.chevron:after {
content: '';
position: absolute;
top: 0;
height: 17%;
background: red;
}
.chevron:before {
left: 0;
width: 51%;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
.chevron:after {
right: 0;
width: 50%;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
<div class="chevron"></div>
What about this:
http://jsfiddle.net/8c2r3m5d/1/
To the :before and :after I added:
top:40%;
SHould be top because the entire chevron is rotated, this is why changing the top value makes it go left and right
I believe you were confused because the chevron is rotated 90 deg. If you remove that rotation, it is much easier to understand the positioning of the chevron elements :
.chevron {
position:relative;
height: 44px;
width: 109px;
background: #545454;
}
.chevron:before, .chevron:after {
content: '';
position: absolute;
top: 40%;
height: 17%;
background: red;
}
.chevron:before {
left: 5%;
width: 46%;
transform: skew(0deg, 6deg);
}
.chevron:after {
right: 5%;
width: 45%;
transform: skew(0deg, -6deg);
}
<div class="chevron"></div>
Note that I also removed the vendor prefixes for the transform property for the sake of this question.
Simply adjust the top offset as follows:
.chevron:before,.chevron:after {
top: 42%;
height: 17%;
}
The top offset value is 50% minus half of the height (8%). You actually are centering the chevron vertically since you have rotated it 90 degrees, hence it looks like it needs to be horizontally centered.
.chevron {
position: absolute;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 44px;
width: 109px;
top: 50px;
background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
background: blue;
}
.chevron {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.chevron:before,.chevron:after {
content: '';
position: absolute;
top: 42%;
height: 17%;
background: red;
}
.chevron:before {
left: 0;
width: 51%;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
.chevron:after {
right: 0;
width: 50%;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
<div class="chevron"></div>
I'm using this css and nothing is showing up. It was working earlier today and has now just stopped. The html is still present but when I inspect element the height is set to 0px. How do I resolve this error?
error: Lexical error at line 571, column 3. Encountered: after : ""
(in this case the last } is line 571)
#chevron {
position: relative;
text-align: center;
margin-bottom: 6px;
height: 80px;
width: 100%;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: -9px;
height: 100%;
width: 51%;
background: #ccc;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #ccc;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
If you copy your css from question and paste it to JS Bin for example, you will see strange red dot:
.
Maybe this will help.
I would like to create a custom shape like this image :
how can I do ?
My CSS :
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px; }
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #337AB7;
-webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg); }
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #337AB7;
-webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }
My HTML file :
<div id="chevron">
</div>
But my result isn't what I want :
Add the background color to the parent div to fill in the gap
Place the border-radius on the parent div to create the two rounded corners
Move the :before and :after down slightly with top: 20px so they don't peak out the top of the div
Example
Here is a fiddle of the below:
#chevron {
width: 350px;
height: 100px;
background: #337AB7;
border-radius: 10px 10px 0 0;
position: relative;
}
#chevron:before {
content: '';
position: absolute;
top: 20px;
left: 0;
height: 100%;
width: 51%;
background: #337AB7;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 20px;
right: 0;
height: 100%;
width: 50%;
background: #337AB7;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
<div id="chevron"></div>
You could skip the CSS and use svg:
Plunker
HTML:
<svg preserveAspectRatio="none" width="200px" height="100px">
<polygon points="0,0 200,0 200,80 100,100 0, 80"
style="fill:teal;stroke:rgba(0,0,0,1);stroke-width:0" />
</svg>
Note that if you need rounded on corners, svg polygons can be tricky as they do not inherently have an attribute similar to border-radius. You can set stroke-linejoin="round" and then adjusting the stroke width attribute to adjust how much it rounds. This works good for solid shapes where you can set the stroke color the same as the fill, or if you can have a border of a different color.
HTML:
<svg width="300" height="200">
<polygon points="10,10 210,10 210,90 110,110 10, 90"
style="fill:teal;stroke:teal;stroke-width:10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
I think that you want to write on this shape
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Example</title>
<style type="text/css">
#chevron{
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 40px;
width: 200px;
font-size:40px;
color:#FFF;
background:#3794d1;
border-radius: 5px 5px 0 0;
}
#chevron:before{
content: '';
position: absolute;
bottom: -10px;
left: 0;
height: 20px;
width: 50%;
background: #3794d1;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after{
content: '';
position: absolute;
bottom: -10px;
right: 0;
height: 20px;
width: 50%;
background: #3794d1;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
</head>
<body>
<div id="chevron">Welcome</div>
</body>
</html>