This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 6 years ago.
I am trying to add red borders to the triangle in the top left corner of the dropdown. But the problem is that the triangle itself is built as borders. So I've got no idea how to do that. Help me please.
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a{
display: block;
}
.dropdown-content:after {
position: absolute;
left: 70%;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can add the triangle borders with another pseudo element.
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a {
display: block;
}
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Try creating inner triangle which is smaller.
Check this answer: Adding border to CSS triangle
And this: CSS triangle custom border color
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'm trying to place a css-shaped triangle inside a div.
Here is CSS:
/*Outer DIV*/
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
/*Triangle DIV*/
div.arrow {
width: 0.5em;
height: 65%;
background-color: #000;
position: relative;}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: -60%;
transform: translateY(80%);
bottom: -1em;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
Desired result:
https://jsfiddle.net/k1x1car4/
How can I can do the same placement in a less tricky and more precise manner?
Thank you!
Just use an .arrow class and a pseudo-element on the parent div.
There is no need to create actual HTML for styling in this intance.
Then position element bottom:0 and left:0. Simple!
div.auth {
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
}
div.arrow {
position: relative;
}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
<div class="auth arrow">par Makarios, Évêque de Lampsaque</div>
I don't know if you are able to change div.arrow, but if so I recommend you not to use a pseudo-element at all and just put the triangle directly into div.arrow. You can then position it using
position: absolute
left: 0;
bottom: 0;
Note: You're going to have to add position:relative to div.auth in order for position:absolute to work on div.arrow.
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
position: relative;
}
div.arrow {
display: block;
content: '';
position: absolute;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
left: 0;
bottom: 0;
}
<div class="auth">
<div class="arrow"></div>par Makarios, Évêque de Lampsaque</div>
I have an old piece of code that pops up a message on moseover. It is coded with absolute positioning and works fine. But I need to change it to relative positioning so the code works better with mobile devices. In this jsfiddle the top line is using relative and doesn't work. The bottom line is using absolute and is working. Would someone please point out where I am going wrong? Here's my code:
<style>
.tooltips {
position: relative;
display: inline;
}
.spank{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spank:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spank:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showhim:hover .spank{
display : block;
left:5px;
top:1px;
margin-left: 50px;
z-index: 999
}
.showhim {
left: 50px;
position: relative;
top: 80px;
width: 100px;
}
.spankme{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spankme:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spankme:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showme:hover .spankme{
display : block;
left: 10px;
top:10px;
margin-left:50px;
z-index: 999
}
.showme {
position: relative;
width: 100px;
}
</style>
<div class="showme">
<div class="showme tooltips">Mouse me</div>
<span class="spankme">Text on popupPlace</span>
</div>
<div class="showhim">
<div class="showit tooltips">Mouse me</div>
<span class="spank">Text on popupPlace</span>
</div>
For the hover that applies to .spankme, you aren't targeting the parent like you did with .spank. The following will allow the parent to reference the child on hover.
Change
.showme:hover .spankme
to
.showhim:hover .spankme
Also, you have three z-index: 999 properties that are missing a closing semi-colon.
Is it possible to turn this:
into this?
Ie. placing the anchor's text above its absolutely positioned arrow pseudo element.
The only solution I can think of is wrapping the anchor text in a span and then absolutely positioning that again over everything. But is there a way to do this without modifying the markup?
http://jsfiddle.net/pgvx1h04/
.tryout {
margin-top: 50px;
}
.container {
position: absolute;
background: #fff;
border: 1px solid black;
}
.container a {
padding: 3px 11px;
position: relative;
}
.container a:before, .container a:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
transform: rotate(45deg);
top: -8px;
left: 18px;
}
.container a:before {
background: black;
z-index: -1;
}
.container a:after {
background: white;
z-index: 1;
top: -7px;
}
<div class="tryout">
<div class="container">
<a>Hello world</a>
</div>
</div>
Maybe you can fake it with before and after like this:
.tryout {
margin-top: 50px;
}
.container {
position: absolute;
background: #fff;
border: 1px solid black;
}
.container a {
padding: 3px 11px;
position: relative;
}
.container a:before {
content:"";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: #000;
top: -19px;
left: 18px;
display: block;
}
.container a:after{
content:"";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: #fff;
top: -17px;
left: 18px;
display: block;
}
<div class="tryout">
<div class="container">
<a>Hello world</a>
</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;
}