I have a strange issue with CSS pseudo after and before when I wanted to create a "ribbon" - they just won't follow z-index for some reason !?
.posts-list .post .title {
position: relative;
color: #fff;
padding: 5px 15px;
width: 100%;
margin-left: -15px;
background: #698800;
z-index: 1;
}
.posts-list .post .title:before {
content: "";
position: absolute;
border-color: transparent #7d90a3 transparent transparent;
border-style: solid;
border-width: 15px;
height: 0;
left: -15px;
bottom: -15px;
width: 0;
z-index: -1;
}
.posts-list .post .title:after {
content: "";
position: absolute;
border-color: transparent transparent transparent #7d90a3;
border-style: solid;
border-width: 15px;
height: 0;
right: -15px;
bottom: -15px;
width: 0;
z-index: -1;
}
Here is the fiddle: http://jsfiddle.net/182999yj/
Related
I'm trying to design a button using only CSS, and no images. The issue is with the bottom-left and top-right corners, and I'm using a background-color to achieve this when the button is on a solid background color. The issue is when the background is not a solid color and you can see the corners, like in the demo below.
So, I'd like to come up with a universal way to code this button with just CSS and no images.
Thanks!
Here is a demo of the button →
Here is the HTML I have in my demo:
<div id="banner">
<div id="button-box">
<a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
</div>
</div>
And the CSS:
#banner {
background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
background-size: cover;
display: block;
width: 100%;
height: 200px;
text-align: center;
}
#button-box {
padding: 50px 0;
}
/* Button */
.btn-cornered {
padding-left: 20px;
padding-right: 20px;
position: relative;
display: inline-block;
line-height: 53px;
text-align: center;
color: #fff;
font-size: 24px;
border: 1px solid #fff;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
text-decoration: none;
}
.btn-cornered:before {
position: absolute;
left: -1px;
bottom: -1px;
content: "";
border-bottom: 11px solid #fff;
border-right: 11px solid transparent;
}
.btn-cornered:after {
position: absolute;
left: -2px;
bottom: -2px;
content: "";
border-bottom: 11px solid;
border-right: 11px solid transparent;
}
.btn-cornered span {
top: -2px;
left: -1px;
position: relative;
padding-right: 20px;
display: block;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.btn-cornered span:before {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid #fff;
}
.btn-cornered span:after {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid;
}
/* Dark Background Styles */
.btn-cornered-dark-bg {
height: 53px;
}
.btn-cornered-dark-bg:after {
border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
max-width: none;
line-height: 58px;
font-size: 24px;
height: 53px;
width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
right: 1px;
top: 1px;
}
.btn-cornered-dark-bg span:after {
border-right-color: #000;
right: 0px;
top: 0px;
}
Here's an example using pseudo elements and an extra span that is skewed to make the angled corners. The trick is hiding the overflow on the button and, with a little finesse, correctly lining up the skewed borders from the span.
I'm not fully satisfied as it requires the extra span and seems a bit fragile when changing font sizes, but here it is:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: steelblue;
}
button {
background: transparent;
padding: 10px 20px;
position: relative;
border: none;
margin: 20px;
overflow: hidden;
color: white;
}
button::before {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 15px;
right: 15px;
content: '';
border-left: 1px solid white;
border-top: 1px solid white;
}
button::after {
display: block;
position: absolute;
bottom: 0;
right: 0;
top: 15px;
left: 15px;
content: '';
border-right: 1px solid white;
border-bottom: 1px solid white;
}
button span {
display: block;
position: absolute;
z-index: -1;
top: 0;
right: -18px;
bottom: 0;
left: 15px;
border: 1px solid white;
transform: skew(45deg);
transform-origin: bottom left;
}
<button>
<span></span>
Sign up & Stay Connected
</button>
Clip-path solution
It is done by pseudo element after which is clipped using css3 clip-path to desired shape. However, clip-path is not supported by IE and Edge (Can I use). It can be little tricky to change values in clip-path to get desired width of border and length of "cutted triangle" so I create little script for that - Codepen
a {
position: relative;
padding: 8px 20px;
}
a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
}
Text Here
Demo - JS Bin
Thanks everyone for your solutions and suggestions. For what it's worth, this is the solution I came up.
CSS:
.abutton {
overflow: hidden;
position: relative;
z-index: 1;
padding: 10px 20px;
border: none;
background: transparent;
text-align: center;
line-height: 1;
font-size: 24px;
color: #fff;
display: inline-block;
text-decoration: none;
}
.abutton:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 8px;
bottom: 8px;
left: 0;
border-left: 1px solid #ffffff;
}
.abutton:after {
content: '';
display: block;
position: absolute;
top: 8px;
right: 0;
bottom: 0;
left: 15px;
border-right: 1px solid #ffffff;
}
.abutton span {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.abutton span:before,.abutton span:after {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.abutton span:before {
left: 8px;
bottom: 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.abutton span:after {
top: 0;
right: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform-origin: top right;
transform-origin: top right;
}
footer .abutton {
font-size: 21px;
}
.abutton:hover {
color: #666;
}
.abutton:hover span:before,.abutton:hover span:after {
background-color: #fff;
}
#button-frame {
background: #666;
min-height: 200px;
padding: 20px;
}
HTML:
<div id="button-frame">
<a class="abutton" href="#"><span></span>Learn More</a>
</div>
hr or div line with up arrow in between. similar to this (Down arrow)
I had tried it. Looks like I am not able to move the arrow to correct position.
My Code:
div.hr {
width:100%;
height: 1px;
background: #7F7F7F;
position:relative;
margin-top:15px;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 5px;
left: 50%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 4px;
left: 50%;
}
<div class="hr"></div>
Here is a modified version of the example you provided, with the arrow pointing up, rather than down. Hope this helps.
DEMO: Codepen
CSS:
div.hr {
width:100%;
height: 1px;
background: #7F7F7F;
position:relative;
margin-top:15px;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 50%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 50%;
}
HTML:
<div class="hr"></div>
I want to create a diamond using css3. I have this code which returned partial results.
.diamond {
width: 100%;
height: 100%;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px; }
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 100%;
height: 100%;
bord*emphasized text*er: 50px solid transparent;
border-top-color: red;
}
Check out this link you can access different type of shapes.
https://css-tricks.com/examples/ShapesOfCSS/#cut-diamond
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
<div id="cut-diamond"></div>
You need to change 100% to 0 like below:
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px; }
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
bord*emphasized text*er: 50px solid transparent;
border-top-color: red;
}
Change css like:
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 19px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
<div class="diamond" />
You can find different shape from here
How would I define the degree of an arrow created with css follows
<div class="bubble"></div>
.bubble
{
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
float: right;
height: 63px;
margin-right: 10px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 29px 16px 0;
border-color: #ff7401 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -29px;
left: 47px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 18px 0;
border-color: silver transparent;
display: block;
width: 0;
z-index: 0;
bottom: -34px;
left: 45px;
}
div.bubble p {
color: #FFFFFF;
font-size: 21px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
http://jsfiddle.net/lgtsfiddler/GpUpZ/1/
What I want is that the arrow's right edge right should be longer and not equal to the left edge. In particular, the left edge should be perpendicular to the text-bubble, and the right edge should come to meet it. For better visualization, here is an example of what I'm trying to achieve:
Modify your css as like this
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 33px 18px 0; // modify this line
border-color: silver transparent;
/* display: block; */ // remove this line
width: 0;
z-index: 0;
bottom: -27px; // modify this line
left: 50px;
-webkit-transform: rotate(-108deg) skew(11deg,-10deg); // modify this line
}
Demo
The shape and direction of the arrow is determined by the individual border widths and colors
A simple adjustment of individual values makes it easy to experiment. It's often also useful to write out the individual values for both widths and colors so see what's what.
JSfiddle Demo
CSS
.bubble {
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
height: 63px;
margin: 50px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top:100%;
left: 47px;
}
.bubble.one:after { /* straight left side */
border-width: 29px 29px 29px 0;
border-color: #ff7401 transparent transparent transparent;
}
.bubble.two:after { /* straight right side */
border-width: 29px 0px 29px 29px;
border-color: #ff7401 transparent transparent transparent ;
}
Following is my jsfiddle in which I am trying to place an arrow image on the bottom border centerally aligned but I am unable to do that. Kindly let me know how to put an arrow image so its centrally aligned no matter what the width of the box is or height? Thanks
http://jsfiddle.net/wn7JN/463/
.bubble
{
position: relative;
width: 100px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
Try this. I add some changes check,
.bubble
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
margin:0 0 0 -26px;
}
replace the .arrow:before style & try it. it will align the arrow at center bottom.
.arrow:before
{
content: "";
position: absolute;
left: 50%;
top:100%;
margin-left:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}