I was wondering whether it is possible to extend pseudo elements with another pseudo element. I tried the following, but it didn't work.
li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 12px 6px 0 6px;
&:before {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 12px;
}
&:after{
#extend &:before;
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
}
One way you could do it would be to create a placeholder. Like so..
%pseudo-block {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 12px;
}
li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 12px 6px 0 6px;
&:before {
#extend %pseudo-block;
}
&:after{
#extend %pseudo-block;
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
}
Related
I'm struggling to make a group button which background get changed on the active path, it may look something like this
I tried an approach but faced some border implementation errors in it, is that body have some better approach to make these button groups?
https://codesandbox.io/s/quizzical-bohr-uczl0?file=/src/App.js
With flex it's not going to work out. My idea is to have a before arrow and an after arrow on each other. The bottom arrow is 1px to the right:
.menu {
background: #efefef;
}
.item {
width: 140px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
color: #000;
background: #efefef;
position: relative;
display: inline-block;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.item.active{
background-color: #0172B6;
color: #fff;
}
.item:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.item.active:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #0172B6;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 2
}
.item.active:after{
content: '';
position: absolute;
right: -26px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.menu .item:last-of-type:before,
.menu .item.active:last-of-type:before,
.menu .item.active:last-of-type:after{
display: none
}
<div class="menu">
<div class="item">Fabric</div>
<div class="item active">Style</div>
<div class="item">Contrast</div>
</div>
I am trying to create a div that looks like that. See the top and bottom with the little tab. I cannot figure out how to do this, it is a "design" thing. I have tried to use the :before :after CSS to create this but no luck. Any ideas?
Added code below. You can see it comes to a point, any way to have it flat?
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
right: 0px;
top: -15px;
border-top: none;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 15px solid black;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
right: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: none;
}
<div class="container tab-top tab-bottom">
</div>
Don't use borders for this. Create a pseudo element and use border-radius.
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:20px 20px 0 0;
top: -7px;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:0 0 20px 20px;
bottom: -7px;
}
<div class="container tab-top tab-bottom">
</div>
You can approximate it using perspective and rotation:
.container {
width: 200px;
height: 100px;
border: 3px solid #000;
position: relative;
margin: 40px
}
.container.tab-top:before,
.container.tab-bottom:after {
content: " ";
position: absolute;
left:15%;
right:15%;
height:30px;
background:#000;
}
.container.tab-top:before {
bottom:100%;
border-radius:10px 10px 0 0;
transform-origin:bottom;
transform:perspective(100px) rotateX(50deg);
}
.container.tab-bottom:after {
top:100%;
border-radius:0 0 10px 10px;
transform-origin:top;
transform:perspective(100px) rotateX(-50deg);
}
<div class="container tab-top tab-bottom">
</div>
You need to use Trapezoid Shape css like:
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
.box {
display: block;
width: 150px;
height: 200px;
border: 2px solid pink;
position: relative;
}
.box::before {
position: absolute;
content: "";
border-bottom: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
top: -10px;
left: 0;
right: 0;
margin: auto;
}
.box::after {
position: absolute;
content: "";
border-top: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
}
<div class="box"></div>
I used as before after css of a div.
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...
This question already has answers here:
Aligning css arrow boxes
(6 answers)
Closed 8 years ago.
Hello i would like to style the borders of my list element so that the border-top-right and the border-bottom-right meet in a triangular shape with only css.
like so:
or like so:
I want to achieve both of these two shapes using css alone, to maybe alter the borders to that shape, i would like to know if that is possible and how i can go about it. The element in question is a list element.
If you're after that specific shape, you can use the :before and :after pseudo elements
Demo Fiddle (second shape)
HTML
<div></div>
CSS
div {
display:inline-block;
position:relative;
height:30px;
width:50px;
background:Red;
}
div:before, div:after {
content:'';
position:absolute;
display:inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
}
div:after {
border-color: transparent transparent transparent red;
right:-26px;
}
div:before {
border-color: transparent transparent transparent white;
}
code for your shapes:-
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
DEMO
div {
background: #EF3E36;
margin: 10px;
}
.arrow1 {
position: relative;
left: 50px;
width: 250px; height: 100px;
}
.arrow1:before {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
border: 50px solid #EF3E36;
border-left: 50px solid transparent;
border-right: 0;
}
.arrow1:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 250px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
.arrow2 {
position: relative;
width: 300px; height: 100px;
}
.arrow2:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 300px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
I want to create a border with two cut off corners for my website. I need this border for different div sizes.
After an hour or so I got it to work with a fixed size of 200px. But I don't know how I can get this flexible.
Here's a
Demo
HTML
<div id="outer"><span>Some Text</span></div>
CSS
body {background: #000;}
#outer {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
margin-top: 50px;
background: #0ff;
}
#outer:before {
content: "";
height: 200px;
left: -15px;
position: absolute;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
}
#outer:after {
content: "";
width: 200px;
height: 200px;
top: -15px;
right: -215px;
position: absolute;
border-left: 15px solid #fff;
border-bottom: 15px solid transparent;
}
#outer span {
width: 200px;
height: 200px;
position: absolute;
padding: 50px;
}
#outer span:before {
display: block;
content: "";
width: 200px;
top: -15px;
left: 0;
position: absolute;
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
}
#outer span:after {
display: block;
content: "";
width: 200px;
height: 200px;
top: 200px;
left: -15px;
position: absolute;
border-top: 15px solid #fff;
border-right: 15px solid transparent;
}
Anyone knows a better solution? Thanks
You pretty much have it yourself. I adapted the fiddle to use percent values for the dimensions and positions. It's still 15px wide for the border though:
Demo: http://jsfiddle.net/b48AK/show
Source: http://jsfiddle.net/b48AK
body {background: #8aa; padding:0px; margin:0px}
#outer {
background: #bfb;
position:relative;
margin:15px;
}
#outer:before {
content: "";
height: 100%;
left: -15px;
position: absolute;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
}
#outer:after {
content: "";
width: 100%;
height: 100%;
top: -15px;
left: 100%;
position: absolute;
border-left: 15px solid #fff;
border-bottom: 15px solid transparent;
}
#outer span:before {
display: block;
content: "";
width: 100%;
top: -15px;
left: 0;
position: absolute;
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
}
#outer span:after {
display: block;
content: "";
width: 100%;
height: 100%;
top: 100%;
left: -15px;
position: absolute;
border-top: 15px solid #fff;
border-right: 15px solid transparent;
}