So I have some vertical pills which have an :after class to create a triangle at the end of the pill as so :
.nav-link.active :after {
position: absolute;
right: -20px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 21px 0 21px 20px;
border-color: transparent transparent transparent #bbcfd8;
}
The problem I have come across is that the triangle will not align with the pills themselves. I have created a codepen with the example I am using :
https://codepen.io/anon/pen/XBjOKR
Any help would be appreciated.
Add top:0 in this style and position: relative; on nav-link
.nav-link.active :after {
position: absolute;
top: 0;
right: -20px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 21px 0 21px 20px;
border-color: transparent transparent transparent #bbcfd8;
}
.nav-pills .nav-link {
position: relative;
}
See updated codepen
Related
I'm creating some custom shapes using CSS I want to draw an arrow whose pointer is on the right side and is aligned left to the div I actually made an arrow which pointer was to the left but I'm having difficulty in making an arrow whose pointer is on right side.
Here's a picture of how I want it
arrow
Here's my html code
<div class="arrow">
<img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>
css
.arrow {
position: relative;
}
.arrow::after {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
border-style: solid;
border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;
bottom: 45px;
}
FIDDLE
You just needed to swap the left/right values of your border rules to make the arrow face the opposite direction.
Change this:
border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;
To this:
border-width: 18px 0 18px 30px;
border-color: transparent transparent transparent #fff;
And then to match your example image, I changed the 30px side to also be 18px, forming an equilateral triangle.
.arrow {
position: relative;
}
.arrow::after {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
border-style: solid;
border-width: 18px 0 18px 18px;
border-color: transparent transparent transparent #fff;
bottom: 45px;
}
<div class="arrow">
<img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>
Take a look here I did it (and made arrow in red so it will be easier to see):
.arrow {
position: relative;
padding: 20px;
}
.arrow::after {
position: absolute;
z-index: 200;
content: '';
width: 0;
height: 0;
left: 20px;
border-style: solid;
border-width: 22px 0 22px 17px;
border-color: transparent transparent transparent red;
bottom: 62px;
}
I need to create border bottom with two different color like below picture
How do I create the CSS?
You can use css pseudo classes i.e :after or :before.
h3 {
margin: 0;
padding-bottom: 7px;
position: relative;
border-bottom: 2px solid #ccc;
}
h3:before {
position: absolute;
background: brown;
height: 2px;
content: '';
width: 50px;
bottom: -2px;
left: 0;
}
<h3>Last Recent Post</h3>
And you can use css gradient as well:
h3 {
margin: 0;
padding-bottom: 7px;
position: relative;
}
h3:before {
position: absolute;
background: linear-gradient(to right, brown 50px, #ccc 50px);
height: 2px;
content: '';
bottom: 0;
right: 0;
left: 0;
}
<h3>Last Recent Post</h3>
The problem with the accepted solution is the bottom border has a fixed width of 50px; , hence it does not respect the length of the text. The more efficient solution would be the following:
<h2>
<span>Text length doesn't matter</span>
</h2>
CSS
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: lightgray;
}
span {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: brown;
display: inline-block;
margin: 0 0 -2px 0;
padding: 30px 3px;
}
The result will look like the following: JsFiddle link: http://jsfiddle.net/uyzndpvs/
use box-shadow with zero blur
syntax :
box-shadow : x-offset y-offset blur radius color
example : box-shadow 0 0 0 1em red , 0 0 0 2em orange.
this will emulate a border of 1em red border and then a 1em orange border.
Note that orange color has a radius of 2em ( because half of it will be covered by red color)
I am trying to add a Triangle to top border of active class in this demo.
I am using this CSS rules:
.xxx a {
border-top: 3px solid #E1483F;
}
.xxx .active > a:after {
border-top: 12px solid #E1483F;
}
But as you can see I am not getting the Triangle plus the item (CSS) is moving down the previous position. How can I fix this?
You could achieve it like this:
JSFiddle - DEMO
.navbar-nav > li {
position: relative;
text-align: center;
}
.active:before {
content:" ";
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 999;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #E1483F transparent transparent transparent;
}
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 ;
}
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.