how can I make something like this, but on all 4 sides of the border (top, right, left, bottom)?
.zigzag {
position: relative;
padding: 4px 4px 20px 4px;
background: lightgray;
}
div>div {
text-align: center;
height: 200px;
}
.zigzag:after {
background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
<div class="zigzag">
<div>ZigZag</div>
</div>
Related
I would like the bottom wave effect on top too! Can anyone show me how it's done.
The effect should look the same on the top of where it is placed on the top as well as the bottom.
I am actually trying to do is break a image top and bottom with waves, so that partial top and bottom of image disappears in waves.
#import url(https://fonts.googleapis.com/css?family=Montserrat);
//variables
$background: #FFF;
body {
background-color: $background;
color: #ffF;
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 2em;
margin: 0;
padding: 0;
}
.wave{
text-align: center;
background: linear-gradient(to bottom, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
.content {
color: #333;
font-size: 0.8em;
padding: 1em;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Rounded Borders</title>
</head>
<body>
<div class="wave">I'm wavy</div>
<div class="content">
With two special pseudo elements (before and after) and the power of repeating css3 radial gradients this ruffle like waves are done much easier than before without an image file.
</div>
</body>
</html>
You can do one part using the pseudo elements and the other using multiple background:
.wave{
text-align: center;
background:
radial-gradient(circle at 10px 15px, white 12px, transparent 13px) left 0 bottom -5px/40px 20px repeat-x,
radial-gradient(circle at 10px -5px, transparent 12px, white 13px) left 0 bottom -10px/20px 20px repeat-x,
linear-gradient(to bottom, sandybrown, chocolate);
padding:40px 0;
position: relative;
}
.wave::before,
.wave::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat-x;
transform:scaleY(-1);
}
.wave::before{
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
<div class="wave">I'm wavy</div>
I want to remove the corners of borders like in
picture.
By now I have tried ::before and ::after pseudo elements but I was only able to remove two of the corners.
.rounded-corner-div{
min-height: 100px;
padding: 10px 20px;
border: 1px #000 solid;
position: relative;
}
.rounded-corner-div::after,
.rounded-corner-div::before {
background-color: white;
content: "";
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.rounded-corner-div::after {
bottom: -1px;
right: -1px;
}
.rounded-corner-div::before {
top: -1px;
left: -1px;
}
<div class="rounded-corner-div"></div>
You can eventually use gradient and background-size:
.rounded-corner-div {
min-height: 100px;
padding: 10px 20px;
position: relative;
background: linear-gradient(to bottom, #000 1px, transparent 1px, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat, linear-gradient(to left, #000 1px, transparent 1px, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat;
background-position: center;
background-size: calc(100% - 1em) 100%, 100% calc(100% - 1em);
/* extra for demo */
display:flex;
align-items:center;
justify-content:center;
}
<div class="rounded-corner-div ">
test
</div>
If you still want to use pseudos elements, you can use them to draw the borders:
.rounded-corner-div {
min-height: 100px;
padding: 10px 20px;
position: relative;
}
.rounded-corner-div::after,
.rounded-corner-div::before {
content: "";
position: absolute;
pointer-events: none;
/* to click through anytime */
border: solid 1px;
}
.rounded-corner-div::after {
left: 10px;
right: 10px;
top: 0;
bottom: 0;
border-left: none;
border-right: none;
}
.rounded-corner-div::before {
top: 10px;
bottom: 10px;
left: 0;
right: 0;
border-top: none;
border-bottom: none;
}
<div class="rounded-corner-div"></div>
I am having issues with text moving them I hover over the element. It is working fine until you hover over it.
So just to clarify you run the mouse over the text and the background colour and everything changes correctly, just the text moved higher than origional text.
This is the CSS code I have for this element:
#top_login_panel ul.menu_topPanel li.item-8 {
background: url("../images/menu/top-panel-login-bg.png") no-repeat scroll 0 0 hsla(0, 0%, 0%, 0);
height: 43px;
width: 145px;
}
#top_login_panel ul.menu_topPanel li.item-8 a {
width: 145px;
}
#top_login_panel ul.menu_topPanel li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
#top_login_panel ul.menu_topPanel li.item-8 a {
display: block;
font-size: 12px;
padding: 22px 0 0 35px;
}
Can you please advice how to resolve this issue?
Thanks
try this.,
#top_login_panel ul.menu_topPanel li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
}
#top_login_panel ul.menu_topPanel li.item-8 a {
display: block;
font-size: 12px;
padding: 22px 0 0 35px;
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
I changed the margin property to a tag
The problem is that the hover block of CSS code has properties and values that the normal state doesn't have so it moves as the new properties are applied. Let the color be the only difference if you don't want it to move.
li.item-8 a {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
<ul>
<li class="item-8">One</li>
<li class="item-8">One</li>
<li class="item-8">One</li>
<li class="item-8">One</li>
</ul>
Thanks #Sathish S I used the moving of the elements but then just placed the padding in a different location and that worked.
#top_login_panel ul.menu_topPanel li.item-8 a {
display: block;
font-size: 12px;
margin-left: -3px;
margin-top: -12px;
width: 114px;
}
#top_login_panel ul.menu_topPanel li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
}
#top_login_panel ul.menu_topPanel li.item-8 a {
padding: 31px 0 0 35px;
}
Is it possible to create two arrows like the photo below with css or I have to use a png or svg?
So far
HTML
a {
position: relative;
display: block;
padding-left: 30px;
line-height: 45px;
height: 45px;
}
a:after,
a:before {
right: 100%;
top: 26px;
border-left: 1px solid black;
content: " ";
height: 30px;
width: 25px;
position: absolute;
pointer-events: none;
left: 7px;
}
a:after {
-webkit-transform: rotate(135deg);
left: -11px;
}
a:before {
-webkit-transform: rotate(45deg);
top: 5px;
}
Next
jsfiddle
I can't figure how to put another pair of borders.
Thanks in advance
With a bit of tinkering of your example, it's possible, but you'd probably be better off using another method to draw it or using an icon or icon font.
Here's the fiddle
Achieved with
transform: skew();
rather than rotate.
It's possible, but I would just use a SVG in this case:
http://jsfiddle.net/6v7Np/
HTML
<div class="arrow_box"></div>
<div class="arrow_box alt"></div>
CSS
.arrow_box {
position: relative;
background: #fff;
top:50px;
left:60px;
}
.arrow_box.alt {
left:80px;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 30px;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 31px;
margin-top: -31px;
}
With gradients:
a{
position: relative;
padding-left: 40px;
}
a::before{
content: '';
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
background-image:
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0% top, 0% bottom, 50% top, 50% bottom;
/* distance ^ ^ */
}
http://jsfiddle.net/E8sRw/
That is my css:
width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;
Is it possible to make border-left have a gradient?
Demo: http://jsfiddle.net/abhitalks/fg7Ex/3/
#grad {
width: 60px;
height: 60px;
position: absolute;
top: 32px;
left: 32px;
clip: rect(auto 30px 60px auto);
}
#grad:after {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, .7);
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
-webkit-transform: rotate(-45deg);
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
border: 1px solid #fff;
}
<div id="grad"></div>
Shamelessly picked up from here: https://gist.github.com/distilledhype/582201
You can check the same kind of question in stackoverflow for solution right border gradient
Here is Jsfiddle Demo
There is no cross-browser css solution as it only supports chrome and firefox. So I recommend using div as parent and assigning it css:
.gradient {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
padding: 2px;
}
.gradient > div {
background: #fff;
}
here is html:
<div class="gradient">
<div>text in div</div>
</div>
How about using a box-shadow on a pseudo element of the div. Something like
FIDDLE
div:before
{
content: '';
display: block;
height: 60px;
width: 3px;
box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
left: -30px;
top: -31px;
position: relative;
}
--color:#777;
margin:0 1%;
padding:0 5%;
background:linear-gradient(to right, transparent, var(--color) 5%, transparent 5%, transparent 95%, var(--color) 95%, transparent);