im straggling to create such title style in CSS. Can someone help me please?
Totally possible with following css
.content::after{
content: "";
background: #fff;
transform: skewY(10deg);
width: 50%;
height: 80px;
position: absolute;
left: 0;
top: 75px;
}
.content::before{
content: "";
background: #fff;
transform: skewY(-10deg);
width: 50%;
height: 80px;
position: absolute;
right: 0;
top: 75px;
}
.content{
width:100%;
height:75px;
background:#fff;
overflow:hidden;
padding:20px;
}
you should check it on different screen sizes and tweak with height of after and before elements
In this case content class should be element you want to add triangle
Related
I want to show <div class="fe"></div> in perfect center. When I use left: 50%; its works but not showing in perfect center.
.fe {
position: fixed;
bottom: 0;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
}
Method 1:
Add transform: translateX(-50%).
body {
background: #ccc;
}
.fe {
transform: translateX(-50%);
background-color: black;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
Method 2:
Use negative margin equal to half of element width. i.e as you have width of .fe 150px so use margin-left: -75px
body {
background: #ccc;
}
.fe {
background-color: black;
margin-left: -75px;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
You can translate the element to move 50% left its own size:
transform:translateX(-50%);
Like this:
.fe {
position: fixed;
bottom: 0px;
left: 50%;
transform:translateX(-50%);
width: 150px;
height: 50px;
background-color: black;
}
instead of setting left to 50%, set left=0 and right=0 and margin=auto.. this will center automatically to center.
.fe {
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
width: 150px;
height: 50px;
background-color: black;
}
Try using margin-left and margin-right as shown below
margin-left: auto;
margin-right: auto;
Setting both these to auto will center the division. For further info in this regard, you can refer this tutorial.
you can use property align="center" for div
.fe{ align="center"
}
Or in div you can define
<div class="fe" align="center"></div>
Try this Add transform: translateX(-50%); property to your code
.fe {
position: fixed;
bottom: 0px;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
transform: translateX(-50%);
margin:auto;
}
I have to put "Play" icon and text "Play" in the center of element that contains and its height and width depend of that image - they are changing depending of the user's screen.
I was trying to use it like this
a.thumbnail:hover:after
{
content: "Play";
width: 50px;
height: 20px;
display: inline-block;
position: absolute;
top:50%;
left: 50%;
background-color: #fff;
border: 1px solid red;
}
But actually the top left corner of the :before element is in the middle and looks displaced... can you suggest me better solution?
add this to the code
margin: -10px -25px; /** height/2 width/2 **/
or use translate the same way
div{
position: relative;
width: 200px;
height: 200px;
background: red;
margin: 20px auto
}
div:after{
content: '';
position: absolute;
width: 50px;
height: 20px;
z-index: 2;
top: 50%;
left: 50%;
background: green;
transform: translate( -50%, -50%)
}
<div><div/>
I try to add a box shadow and a gradient border using images and css pseudo-elements.
I tried that code:
.box:before {
content: url('box-shadow.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
z-index: -1;
bottom: -9px;
line-height: 0;
}
.box:after {
content: url('box-border.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
bottom: -5px;
right: 0px;
}
But the added images don't resize when the parent div resizes, whereas it works by adding the image manually.
See that fiddle http://jsfiddle.net/5TG3E/2/
I try from my side may be that's help you. Write like this:
.box:after {
content:'';
position: absolute;
z-index: -1;
bottom: -9px;
margin: 0 auto;
top:0;
left:0;
right:0;
background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
-moz-background-size:100% 9px;
background-size:100% 9px;
}
.box:before {
content:'';
position: absolute;
bottom: 0px;
right: 0px;
left:0;
top:0;
background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}
Check this http://jsfiddle.net/5TG3E/6/
Please take a look at this image:
I apologise for my useless paint ability :-)
How can I draw that sort of shape in css, like a ) without the use of text in a div, just pure css.
I have tried to make it curved like in the example, but I don't know how to curve it like that from the center.
What must I do to make this kind of shape in css?
Thanks.
Here's one approach to implementing this, but note that any text in this element isn't going to maintain the illusion of a curve. So I'm unsure as to how useful this would be to you, but as you don't specify your use-case, it seemed worth posting as, perhaps, it might be of use in some way. If only as an idea for how you might proceed:
#box {
display: block;
margin: 2em auto;
width: 10em;
height: 5em;
background-color: black;
position: relative;
}
#box:before {
position: absolute;
top: -1em;
left: 0;
right: 0;
height: 2em;
background-color: #fff;
content: ' ';
border-radius: 50%;
}
#box:after {
position: absolute;
bottom: -1em;
left: 0;
right: 0;
height: 2em;
background-color: #000;
content: ' ';
border-radius: 50%;
}
JS Fiddle demo.
Your example appears to resemble a chevron shape, forgive me if that's not the case, but if it is you are in luck because you can make a chevron shape using pure 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: black;
transform: skew(0deg, 6deg);
}
.chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: black;
transform: skew(0deg, -6deg);
}
<div class="chevron"></div>
You can find the original example and some other shapes here
Here's an example as an image:
I want to style page elements like this using CSS, though. I can't seem to get it to work with border styles. Help appreciated.
You could also do it with two skewed pseudo-elements. Support is the same as for box-shadow: everything except IE8/7 and Opera Mini.
live demo
HTML:
<div class='box'></div>
CSS:
.box {
position: relative;
margin: 10em auto 0;
width: 20em; height: 20em;
background: dimgrey;
}
.box:before, .box:after {
position: absolute;
transform-origin: bottom right;
content: '';
}
.box:before {
top: 0; right: 100%; bottom: 0;
width: 4em;
background: darkgrey;
transform: skewY(45deg);
}
.box:after {
right: 0; bottom: 100%; left: 0;
height: 4em;
background: silver;
transform: skewX(45deg);
}