How can I create a down arrow for parent in css so it would look like a speech bubble?
This is what I tried.
<div class="parent">TEST
<span class="tri">TEST</span>
</div>
.tri {
opacity: 0;
}
.tri:before {
position: absolute;
top: 40%;
left: 50%;
margin-top: -15px;
margin-left: -100px;
background-color: #FFF;
color: #000;
text-align: center;
padding: 10px;
min-width: 200px;
}
.tri:after {
border-top: 5px solid #000;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.parent:hover .tri:before, .parent:hover .tri:after {
opacity: 1;
}
Fiddle
You are missing 2 things here :
content:''; for the pseudos
show the parent pseudo
:before,
:after {
content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
opacity: 1;
}
:before,
:after {
content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
opacity: 1;
}
.tri {
opacity: 0;
}
.tri:before {
position: absolute;
top: 40%;
left: 50%;
margin-top: -15px;
margin-left: -100px;
background-color: #FFF;
color: #000;
text-align: center;
padding: 10px;
min-width: 200px;
}
.tri:after {
border-top: 5px solid #000;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
<div class="parent">TEST
<span class="tri">TEST</span>
</div>
https://fiddle.jshell.net/0h05kbsd/3/
you could also spare some code using an unicode character like \25bc:
a:hover:after {
content:'\25bc';
}
<a href> link to hover to show a down-arrow</a>
unicode ressource among others : http://unicode-table.com/en/sets/arrows-symbols/
Like this?
.tri {
opacity: 1;
display: block;
}
.tri:after {
content: '';
display: inline-block; width: 10px; height: 10px;
margin: -5px 0 0 10px; padding: 0;
border: 5px solid #000;
border-width: 0 3px 3px 0;
background: transparent;
transform: rotate(45deg);
}
Make an angle with two borders and then rotate it 45 degrees or where ever you need it to point to. Important: a :after or :before pseudo element always needs a content: '' property, even it just an empty string. Otherwise the pseudo element will not show.
More elaborate examples of entire speech bubbles are easily found, this fiddle, for example.
You can use clip-path as an alternate for the border shape ,
div:before {
content: '';
position: absolute;
display: block;
left: -20px;
top: 6px;
width: 20px;
height: 20px;
background-color: #888;
-webkit-clip-path: polygon(0 50%, 100% 0 , 100% 100%)
}
div {
width: 150px;
height: 50px;
background-color: #999;
margin-left: 40px;
border-radius: 4px;
position: relative;
}
div:before {
content: '';
position: absolute;
display: block;
left: -20px;
top: 6px;
width: 20px;
height: 20px;
background-color: #999;
-webkit-clip-path: polygon(0 50%, 100% 0 , 100% 100%)
}
<div></div>
Related
I have a few SVG glyphs whitch i need to draw with HTML.
Is it possible to create HTML with CSS so that it looks like the SVG?
My problem was the shadow at the arrows.
You could use clip-path for the arrows (and its shadow too) and pseudoelements with a box-shadow for the figure with the overlapped boxes
Codepen example
Markup
<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>
Css
.arrow {
height: 55px;
width: 250px;
position: relative;
line-height: 55px;
padding: 0 35px;
}
.arrow::before, .arrow::after {
content: "";
display: block;
height: inherit;
width: inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: #666;
clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px), 100% 50%, 85% 0);
}
.arrow::after {
transform: translate(5px, 5px);
opacity: .25;
}
.boxes, .boxes::before, .boxes::after {
position: relative;
background: #f2f2f2;
height: 180px;
width: 180px;
border-color: #999;
border-style: solid;
border-width: 1px;
border-top-width: 2px;
border-right-width: 2px;
box-shadow: 3px 4px 0 #ccc;
}
.boxes::before, .boxes::after {
content: "";
position: absolute;
display: block;
}
.boxes::after { top: -12px; left: 4px; z-index: -1; }
.boxes::before { top: -20px; left: 14px; z-index: -2; }
The other two figures can be obtained with the same approach (they are just a simple change of size and colours)
Result
here is one of shape:
body{
padding:20px;
}
div {
position:relative;
display: inline-block;
background: red;
position:relative;
padding: 9px;
padding-right: 22px;
}
div:before {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent red transparent transparent;
position: absolute;
left: -15px;
top: 1px;
}
div:after {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent white transparent transparent;
position: absolute;
left: 93px;
top: 0px;
}
<div class="triangle">Hello world </div>
I created a popover but I am having some styling issues with it. I would like the popover's arrow to have red border and transparent background but instead its all red.
I have tried changing border-bottom to transparent but then there is no border.
CSS:
a {
position: relative;
}
.popover:before {
content: "\A";
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
top: -5px;
position: absolute;
left: 45%
}
.popover {
text-decoration: none;
color: black;
position: absolute;
left: 0%;
top: 100%;
display: block;
border: 1px solid red;
padding: 10px;
}
.popover span {
display: block;
font-weight: 700;
}
JSFiddle Demo
You can do it using both CSS Pseudo-elements before and after.
.popover:before {
content: "";
position: absolute;
top: -15px;
left: 30px;
border-width: 0 15px 15px 15px;
border-style: solid;
border-color: red transparent;
display: block;
width: 0;}
.popover:after {
content: "";
position: absolute;
top: -10px;
left: 36px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: #fff transparent;
display: block;}
See this image
Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE )
How can i achieve this ?
in details :-
A div with 2px red border.
that div contains 2 buttons with inline block.
one is on left side and other one is at right side of DIV.
LIKE : [BUTTON1][BUTTON2]
but i want this :- [BUTTON1\BUTTON2]
a Slash style shape between both buttons.
i have tried
#M_Left {
width: 0;
height: 0;
margin: 0 !important;
padding: 0 !important;
display: inline-block;
border-top: 100px solid #3fc2ff;
border-right: 50px solid transparent;
border-left: 400px solid #3fc2ff;
color: #fff;
text-align: center;
}
#M_Right {
width: 0;
height: 0;
margin-left: -40;
border-bottom: 100px solid #3fc2ff;
display: inline-block;
border-right: 400px solid #3fc2ff;
border-left: 50px solid transparent;
color: #fff;
text-align: center !important;
}
.white_M {
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
display: inline-block;
min-width: 400px;
border-width: 0 !important;
border-style: none !important;
color: #3fc2ff !important;
}
.M_Container {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
display: inline-block;
border: 2px solid #3fc2ff;
}
<div class="M_Container">
<div id="M_Left"> HEY</div>
<div id="M_Right" class="white_Mx"> </div>
</div>
Please help me
Thank you in advance
You can create it by using following approach
$('button').click(function() {
$(this).addClass('current').siblings().removeClass('current');
});
.buttonGroup {
display: flex;
border: 1px solid skyblue;
/* Border color change as your need */
overflow: hidden;
border-radius: 5px;
max-width: 350px;
}
button {
flex: 1;
background: none;
border: none;
outline: none;
padding: 5px;
cursor: pointer;
position: relative;
}
button:hover:before {
background: skyblue;
}
button:hover:after {
background: skyblue;
}
button.current:before {
background: skyblue;
}
button.current:after {
background: skyblue;
}
button:before {
content: '';
width: 100%;
height: 100%;
background: #fff;
position: absolute;
transform: skewX(-25deg);
left: -5px;
top: 0;
z-index: -1;
}
button:after {
content: '';
width: 100%;
height: 100%;
background: #fff;
position: absolute;
transform: skewX(-25deg);
right: -5px;
top: 0;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonGroup">
<button>Hello</button>
<button>Bye</button>
</div>
Try this.
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
})
.wrap {
white-space: nowrap;
font-size: 0;
border: 2px solid navy;
display: inline-block;
overflow: hidden;
}
button {
border: 0;
background: #fff;
padding: 10px 20px;
position: relative;
outline: 0;
cursor:pointer;
}
button:after,
button:before {
content: '';
position: absolute;
transform: skewX(-25deg);
height: 100%;
width: 10px;
background: #fff;
top: 0;
z-index: 1;
right: 0;
}
button:before {
right: auto;
left: 0;
}
button.active {
background: blue;
color: #fff;
}
button.active:after,
button.active:before {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<button>Button</button>
<button class="active">Active</button>
</div>
Is there a way to achieve this border in CSS? I've got one DIV with list of bullet points and I need to wrap it in a border like the image.
You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.
div {
width: 200px;
height: 150px;
border: 1px solid black;
border-bottom: none;
position: relative;
background: white;
margin: 20px;
}
div:after, div:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 101px 0 101px;
border-color: black transparent transparent transparent;
top: 100%;
left: -1px;
position: absolute;
}
div:after {
border-color: white transparent transparent transparent;
top: calc(100% - 1px);
}
<div></div>
Have a look at this Fiddle
Basically add this css to a div:
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:after {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 54px;
width: 0;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
try this one:
.down-arrow {
display: inline-block;
position: relative;
background: darkcyan;
padding: 15px 0;
width: 200px;
text-align: center;
}
.down-arrow:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 0;
border-top: 20px solid darkcyan;
border-right: 100px solid transparent;
border-bottom: 0 solid transparent;
border-left: 100px solid transparent;
}
DEMO HERE
Here is the code for the box:
.box {
background: #fff;
border: 1px solid #000;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
.box:after {
border-top: 35px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 55px;
width: 0;
}
.box:before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 56px;
width: 0;
}
<div class="box">
</div>
I hope it helps
I have this code snippet:
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
}
.multiply-button-arrow {
display: table-cell;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
<div class="multiply-button-arrow"></div>
</button>
I need to make border on this "arrowed" button. I can easily border rectangle part (I've already did it), but how to make this border on triangle part?
The following should do what you need
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 0 9px;
border: solid 1px black;
border-right: none !important;
position: relative;
vertical-align:middle;
height: 40px; /* double the border width */
box-sizing: border-box;
}
.multiply-button-content:after,
.multiply-button-content:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 20px 0 20px 12px;
margin-top: -20px;
}
.multiply-button-content:after {
border-color: rgba(0, 128, 0, 0);
border-left-color: #008000;
margin-left: -1px;
}
.multiply-button-content:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: #000000;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
This is a useful tool
div{
position: relative;
background-color: #008000;
padding: 0px 16px;
height: 40px;
line-height: 40px;
display: inline-block;
color: white;
border: 2px solid black;
border-right: none;
z-index:1;
}
div:before{
content: '';
position: absolute;
left: 100%;
z-index:-1;
width: 28px;
height: 28px;
background-color: #008000;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg) translate(-14px,-7px);
}
<div>Multiply</div>
Or much simplier :
the CSS with only one pseudo element
.multiply-button {
background: rgba(0, 0, 0, 0);
border: none;
width: 100px;
color: #FFF;
padding: 0;
overflow: hidden;
}
.multiply-button-content {
display: block;
position: relative;
background: #008000;
width: 60px;
padding: 10px 9px;
border: solid 1px #000;
border-right: none !important;
}
.multiply-button-content:before {
content: "";
position: absolute;
width: 36px;
height: 31px;
z-index: -1;
top: 0;
right: -13px;
border: 1px solid #000;
background: #008000;
transform: rotate(45deg);
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
Since it only takes one pseudo element to make the 'point', you could use the other to make a border behind it (making it slightly bigger in size).
For example;
div {
height: 30px;
border: 2px solid black;
display: inline-block;
border-right: 2px solid transparent;
line-height: 30px;
text-align: center;
position: relative;
background: tomato;
color: white;
}
div:before {
content: "";
position: absolute;
border: 17px solid transparent;
border-left: 17px solid black;
right: -35px;
top: -2px;
z-index: 6;
}
div:after {
content: "";
position: absolute;
border: 15px solid transparent;
border-left: 15px solid tomato;
right: -31px;
top: 0;
z-index: 8;
}
<div>Arrow, Please!</div>
You can achieve that with :before or :after pseudo selectors. Study and adjust the example below.
.multiply-button {
display: inline;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
position: realtive;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
width: 100px;
position: relative;
}
.multiply-button-arrow {
width: 0;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent black;
position: absolute;
top: -2px;
right:-12px;
}
.multiply-button-arrow:before {
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
position: absolute;
right: 1px;
top: -20px;
content: "";
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">
<div class="multiply-button-arrow"></div>
Multiply</div>
</button>