.chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
}
.chevron:before {
content: '';
position: absolute;
top: 40px;
left: 0;
height: 100%;
width: 60%;
background-color: rgb(9, 73, 131);
background-color: rgba(9, 73, 131, 1);
transform: skew(0deg, 6deg);
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
}
.chevron:after {
content: '';
position: absolute;
top: 40px;
right: 0;
height: 100%;
width: 60%;
background-color: rgb(9, 73, 131);
background-color: rgba(9, 73, 131, 1);
transform: skew(0deg, -6deg);
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
}
I have a Wordpress Project where I have added a Background color. The Background color work fine with all the browsers except Safari. I have tried multiple approaches like giving rgb(For Old Browsers) rgba(For Latest Browsers) but it is still not visible.
Try the below CSS for safari browser.
_::-webkit-full-page-media, _:future, :root .chevron:before{
background-color: rgb(9, 73, 131);
}
_::-webkit-full-page-media, _:future, :root .chevron:after{
background-color: rgb(9, 73, 131);
}
Related
I already tried z-index. I think it has something to do with the pseudo classes, but I don't know what it is, exactly... I'm a newbie so I can only do HTML and CSS for now, I don't know any JS. Thank you! :)
.h1bcg {
margin-top: 180px;
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 200px;
width: 666px;
}
.h1bcg:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: rgba(88, 255, 171, 0.7);
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
box-shadow: 0.1rem 0.6rem 9px rgba(0, 0, 0, 0.4);
}
.h1bcg:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: rgba(88, 255, 171, 0.7);
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
box-shadow: 0.1rem 0.6rem 9px rgba(0, 0, 0, 0.4);
}
<div class="h1bcg:before h1bcg:after ">
<h1 class="text-center h1bcg"> Lorem ipsum dolor sit amet. </h1>
</div>
Pseudo classes and z-index is correct.
Position the pseudo-classes below the element by giving it a negative z-index.
Also note: Pseudo classes (the :before and :after styling rules) are applied to the element containing the original class (.h1bcg) appropriately. You don't have to specify these classes in your HTML for them to take effect.
.h1bcg {
margin-top: 180px;
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 200px;
width: 666px;
}
.h1bcg:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: rgba(88, 255, 171, 0.7);
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
box-shadow: 0.1rem 0.6rem 9px rgba(0, 0, 0, 0.4);
}
.h1bcg:after {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: rgba(88, 255, 171, 0.7);
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
box-shadow: 0.1rem 0.6rem 9px rgba(0, 0, 0, 0.4);
}
<div>
<h1 class="text-center h1bcg"> Lorem ipsum dolor sit amet. </h1>
</div>
I think u are looking for the below result.
For that I've added a neganitve z-index to both psuedo classes (.h1bcg:after and .h1bcg:before).
Hope it helps.
.h1bcg {
margin-top: 180px;
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 200px;
width: 666px;
}
.h1bcg:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: rgba(88, 255, 171, 0.7);
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
box-shadow: 0.1rem 0.6rem 9px rgba(0, 0, 0, 0.4);
z-index:-1;
}
.h1bcg:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: rgba(88, 255, 171, 0.7);
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
box-shadow: 0.1rem 0.6rem 9px rgba(0, 0, 0, 0.4);
z-index:-1;
}
<div class="h1bcg:before h1bcg:after ">
<h1 class="text-center h1bcg"> Lorem ipsum dolor sit amet.</h1>
</div>
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 set a shape to a div tag. Everything works fine, but when I set an img tag inside that shape, it does not show well.
My CSS code :
#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); }
My html file :
<div id="chevron">
<img src="http://i.stack.imgur.com/HtYUn.jpg" style="width:120px;height:120px"/>
</div>
I want to set my shape (chevron) as a background and the inner elements should be over it.
http://jsfiddle.net/45tyb219/2/
Just add position: relative; and z-index: 1; to your .img - alternatively you can also add z-index: -1; to the #chevron:after.
#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); }
img {
position: relative;
z-index: 1;
}
<div id="chevron">
<img src="http://i.stack.imgur.com/HtYUn.jpg" style="margin-left: 100px;width:120px;height:120px"/>
</div>
You can achieve this with CSS but SVG makes it much easier :
svg{width:50%;display:block;margin:0 auto;}
<svg viewbox="0 0 100 50">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="50">
<image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="50" width="100" />
</pattern>
</defs>
<path fill="url(#img)" d="M5 0 H95 Q100 0 100 5 V45 L50 50 L0 45 V5 Q0 0 5 0z" />
</svg>
In this demo, the image is set in the <pattern> element and used to fill the shape defined with the <path /> element.
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>