I created arrow(triangle)-style breadcrumbs with CSS, no images.
jsFiddle
html:
<ul class="breadcrumb">
<li>Home</li>
<li>First item</li>
<li>Second item</li>
<li>Last item</li>
</ul>
css:
.breadcrumb {
list-style: none;
overflow: hidden;
}
.breadcrumb li {
background: #F6F6F6;
padding: 5px 0 5px 36px;
background: #F6F6F6;
position: relative;
display: block;
float: left;
}
.breadcrumb li:before {
content:" ";
display: block;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid #DDDDDD;
position: absolute;
top: 50%;
margin-top: -25px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:after {
content:" ";
display: block;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid #F6F6F6;
position: absolute;
top: 50%;
margin-top: -25px;
left: 100%;
z-index: 2;
}
The problem is when parent's width is not enough to display breadcrumbs in 1 line and it takes 2 lines (or more), overflow:hidden stops working and unwanted parts of triangles get visible (http://screencloud.net/v/fQEq).
Is there a way to fix that?
Try with this style:
.breadcrumb {
list-style: none;
overflow: hidden;
}
.breadcrumb li:before {
border-bottom: 15px solid transparent;
border-left: 20px solid #dddddd;
border-top: 15px solid transparent;
content:" ";
display: block;
height: 0;
left: 100%;
margin-left: 1px;
margin-top: -15px;
position: absolute;
top: 50%;
width: 0;
z-index: 1;
}
.breadcrumb li:after {
border-bottom: 15px solid transparent;
border-left: 20px solid #f6f6f6;
border-top: 15px solid transparent;
content:" ";
display: block;
height: 0;
left: 100%;
margin-top: -15px;
position: absolute;
top: 50%;
width: 0;
z-index: 2;
}
.breadcrumb li {
background: none repeat scroll 0 0 #f6f6f6;
display: block;
float: left;
height: 20px;
padding: 5px 0 5px 33px;
position: relative;
}
Hope it helps!
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 want to add an icon (a small triangle) under a link using the CSS :after attribute, It works in Chrome but not in Firefox and IE. Here is the result in chrome:
but in IE and firefox here is the result:
The CSS code:
li.ui-state-active > a:after {
width: 22px;
height: 19px;
position: absolute;
display:block !important;
left: 50%;
margin-left: -11px;
bottom: -19px;
z-index: 2;
content: '';
**background-image: url(#{resource['img:css/arrow-menu-onglet.png']}) no-repeat !important;**
}
also I tried this but with the same result (ok in just chrome):
li.ui-state-active > a:after {
width: 22px;
height: 19px;
position: absolute;
display:block !important;
left: 50%;
margin-left: -11px;
bottom: -19px;
z-index: 2;
**content: url(#{resource['img:css/arrow-menu-onglet.png']}) no-repeat !important;**
}
Can you help me please figure out why?
No image needed:
/* tabbed nav */
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav li a {
position: relative;
display: inline-block;
padding: 15px 25px;
background: #fff;
margin-right: 4px;
margin-bottom: 7px;
}
nav li a.state-active:after,
nav li a.state-active:before {
content: " ";
position: absolute;
z-index: 1;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
nav li a.state-active:after {
bottom: -15px;
border-top: 15px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
nav li a.state-active:before {
bottom: -23px;
border-top: 23px solid #DBD5C7;
border-left: 23px solid transparent;
border-right: 23px solid transparent;
}
/* ----- */
* {
margin: 0;
padding: 0;
}
body {
margin: 20px;
background: #DBD5C7;
}
div {
background: #fff;
height: 100px;
}
<nav>
<ul>
<li>LINK 1
</li>
<li>LINK 2
</li>
<li>LINK 3
</li>
</ul>
</nav>
<div></div>
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;
}