CSS
.caret-bottom
{
display: inline-block;
width: 0;
height: 0;
vertical-align:top;
content: "";
border-top: 9px solid #FFFFFF;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
margin-top: 13px;
margin-left: 4px;
}
HTML CODE
<div class="caret-left"></div>
I need shadow bottom side for this triangle like a 3D effect.
.triangle {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
-webkit-transform: rotate(45deg);
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="triangle"></div>
DEMO
http://jsfiddle.net/w9Zgc/
Hi post is a bit old but have an example that I used.
Link to demo with code.
.triangle {
position: relative;
background-color: white;
opacity: 0.7;
text-align: left;
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
width: 7em;
height: 7em;
border-top-right-radius: 30%;
}
.triangle {
transform: rotate(-90deg) skewX(-30deg) scale(1, .866);
}
.triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}
.triangle {
filter: drop-shadow(4px 7px 10px rgb(0, 0, 0));
-webkit-filter: drop-shadow(4px 7px 10px rgb(0, 0, 0));
}
<html>
<body>
<div class="triangle-wrap">
<div class='triangle'></div>
</div>
</body>
</html>
try this one i think it will help you
.caret-bottom {
display: inline-block;
width: 0;
height: 0;
content: "";
border-top: 10px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
position: relative;
}
.caret-bottom:before {
width: 0;
height: 0;
content: "";
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
z-index: 1;
top: -12px;
left: -10px;
}
<div class="caret-bottom"></div>
Related
I created a new style to show errors or any message.
input{
min-width:350px;
padding:10px;
}
.paswd_info_wrap.quick_note_error {
background: #f77777;
color: white;
position: relative;
margin-top: 0;
border-left: none;
font-size: 0.8em;
padding: 10px 20px;
margin-top:10px;
max-width:350px;
font-size:1.2em
}
.paswd_info_wrap {
padding: 10px;
text-align: center;
background: #efefef;
}
.paswd_info_wrap.quick_note_error:before {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: calc(50% - 10px);
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_info_wrap.quick_note_error::after {
right: 0;
bottom: -10px;
transform: rotate(0deg);
top: auto;
left: calc(50% + 40px);
}
.quick_note_error::after {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: 0px;
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
<input type="text" placeholder="write password">
<div class="paswd_info_wrap quick_note_error">
<div class="paswd_err">Password is not given correct.</div>
</div>
I want to add text Error in bottom right as given below in an image.
I have tried to find solution by replacing content:'' with content: 'Error' (in CSS) but it is not working as expected.
IGNORE THIS -
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
I have tried a combo of clip-path and giving explicit height to the ::after pseudo element with minimal padding,text-align,box-shadow changes and not relying on border,drop-shadow. The following should work for you :-
input{
min-width:350px;
padding:10px;
}
.paswd_info_wrap.quick_note_error {
background: #f77777;
color: white;
position: relative;
margin-top: 0;
border-left: none;
font-size: 0.8em;
padding: 10px 20px;
margin-top:10px;
max-width:350px;
font-size:1.2em
}
.paswd_info_wrap {
padding: 10px;
text-align: center;
background: #efefef;
}
.paswd_info_wrap.quick_note_error:before {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: calc(50% - 10px);
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_info_wrap.quick_note_error::after {
right: 0;
bottom: -10px;
transform: rotate(0deg);
top: 100%;
left: calc(50% + 40px);
}
.quick_note_error::after {
content: 'Error';
position: absolute;
left: 0px;
top: -10px;
padding-right:5%;
padding-bottom:2px;
text-align:right;
height:10px;
clip-path: polygon(9% 100%, 0 0, 100% 0, 91% 100%);
background:#f77777;
font-size:10px;
transform: rotate( 180deg);
box-shadow: inset 1px 1px 2px #f34c4c;
z-index: 10;
}
<input type="text" placeholder="write password">
<div class="paswd_info_wrap quick_note_error">
<div class="paswd_err">Password is not given correct.</div>
</div>
You can experiment with clip path's here as well for more precision - https://bennettfeely.com/clippy/
I just add another pseudo-element to display the text.
input{
min-width:350px;
padding:10px;
}
.paswd_info_wrap.quick_note_error {
background: #f77777;
color: white;
position: relative;
margin-top: 0;
border-left: none;
font-size: 0.8em;
padding: 10px 20px;
margin-top:10px;
max-width:350px;
font-size:1.2em
}
.paswd_info_wrap {
padding: 10px;
text-align: center;
background: #efefef;
}
.paswd_info_wrap.quick_note_error:before {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: calc(50% - 10px);
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_info_wrap.quick_note_error::after {
right: 0;
bottom: -10px;
transform: rotate(0deg);
top: auto;
left: calc(50% + 40px);
}
.quick_note_error::after {
content: '';
position: absolute;
border-right: 10px solid #ff000000;
border-left: 10px solid #ffffff00;
border-top: 10px solid #f77777;
left: 0px;
top: -10px;
transform: rotate( 180deg);
z-index: 10;
filter: drop-shadow(0px 0px 1px red);
}
.paswd_err::after {
content: 'Error';
display: inline-block;
position: relative;
top: 24px;
right: 0;
width: 100px;
background: none;
z-index: 99;
font-size: 12px;
filter: drop-shadow(0px 0px 1px red);
}
<input type="text" placeholder="write password">
<div class="paswd_info_wrap quick_note_error">
<div class="paswd_err">Password is not given correct.</div>
</div>
<span className={style.tooltip}>
<text className={style.textHeaderTooltip}>Telegram token</text>
</span>
.tooltip {
position: absolute;
z-index: 100;
width: 218px;
height: 175px;
box-shadow: 0 15px 20px rgba(19, 43, 95, 0.29);
background-color: #575f7a;
margin-left: 61rem;
margin-top: 23rem;
padding-top: 25px;
padding-left: 25px;
&::after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #575f7a;
transform: rotate(-90deg);
}
}
How to make triangle be a part of my tooltip, I can't understand what is the reason that this isn't the same block. What should I do to get a better variant of this tooltip version?
I am currently attempting to add a uniform glow effect around a hexagon created with CSS classes but due to the way the hexagon is drawn, the glow effect ends up with odd breaks that I cannot seem to fix.
.hexagon {
position: relative;
border-radius: 5px;
height: 125px;
width: 75px;
margin: 50px;
box-sizing: border-box;
border: 5px solid transparent;
border-top-color: black;
border-bottom-color: black;
display: inline-block;
}
.hexagon:before, .hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -5px;
left: -5px;
background: inherit;
border-radius: inherit;
height: 100%;
width: 100%;
}
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
.hexagon:hover, .hexagon:hover:before, .hexagon:hover:after {
box-shadow: 0 10px 2px -2px rgba(255,0,0,0.5), 0 -10px 2px -2px rgba(255,0,0,0.5);
}
<div class=hexagon></div>
You may add more padding inside the element and adjust the border radius. All line will cross and the radius will fix the shape :
.hexagon {
position: relative;
border-radius: 20px;
padding: 40px;
height: 125px;
width: 75px;
margin: 50px;
box-sizing: border-box;
border: 5px solid transparent;
border-top-color: black;
border-bottom-color: black;
display: inline-block;
}
.hexagon:before,
.hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -5px;
left: -5px;
background: inherit;
border-radius: inherit;
height: 100%;
width: 100%;
}
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
box-shadow: 0 10px 2px -2px rgba(255, 0, 0, 0.5), 0 -10px 2px -2px rgba(255, 0, 0, 0.5);
}
<div class=hexagon></div>
You can of course control the radius of your shape by changing simultaneously the padding and border-radius
I have a simple div on a page:
<div>Some Text</div>
Is it possible with CSS, to make something like this:
You can use this code to make a similar arrow
<div class="arrow_box">Arrow</div>
.arrow_box {
position: relative;
background: #20d568;
border: 10px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(32, 213, 104, 0);
border-left-color: #20d568;
border-width: 70px;
margin-top: -70px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 84px;
margin-top: -84px;
}
There is even a website to produce similar snippet like the one mentioned above.
Hope this helps!
Here is the CSS and HTML markup you need to create this effect in your own project.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>title</title>
<link>
<style type="text/css">
#base {
border: 3px solid #ccc;
background: red;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
padding: 10px 0px 0px 10px;
}
#base:before {
border-bottom: 22px solid transparent;
border-left: 19px solid #ccc;
border-top: 22px solid transparent;
content: "";
height: 0;
right: -22px;
position: absolute;
top: -2px;
width: 0;
}
#base:after {
border-bottom: 20px solid transparent;
border-left: 17px solid red;
border-top: 20px solid transparent;
content: "";
height: 0;
right: -17px;
position: absolute;
top: 0px;
width: 0;
}
</style>
</head>
<body>
<div id="base" >
NEXT
</div>
</body>
</html>
HTML
<div class="textBox">
Text
</div>
CSS
body{
background:#000;
}
.textBox{
padding:10px;
background-color:green;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
width:50px;
color:#fff;
position: relative;
}
.textBox::after{
content: '';
position: absolute;
width: 30px;
height: 29px;
background: green;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
transform: rotate(45deg);
top: 2px;
right: -18px;
z-index: -1
}
Codepen : http://codepen.io/swapnaranjitanayak/pen/mOWrzX
Sure can using a couple of pseudo elements. Example:
<div class="arrowBox">Some Text</div>
then use the following CSS (note, I've used a red border as opposed to white so I could see it):
.arrowBox{
width: 100px;
height: 50px;
background: green;
border: 5px red solid;
display: block;
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
.arrowBox:before{
content: '';
width: 0;
height: 0;
position: absolute;
right: -34px;
top: -5px;
border-top: 30px solid transparent;
border-bottom:30px solid transparent;
border-left: 30px solid red;
z-index: -1;
}
.arrowBox:after{
content: '';
width: 0;
height: 0;
position: absolute;
right: -25px;
top: 0;
border-top: 25px solid transparent;
border-bottom:25px solid transparent;
border-left: 25px solid green;
}
Something for you to get started:
*{
box-sizing:border-box;
}
.wrapper{
border: 1px solid #ddd;
display:inline-block;
position:relative;
}
div.arrow {
height: 50px;
line-height: 50px;
width: 75px;
background: green;
position: relative;
text-align:center;
border: 1px solid #ddd;
margin: 10px;
color:white;
font-weight:bolder;
}
div.arrow:before {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
height: 0;
width: 0;
border-left: 25px solid green;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index:2;
}
div.arrow:after {
content: '';
display: block;
position: absolute;
right: -11px;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 35px solid white;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
z-index:1;
}
.wrapper:after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 36px solid #ddd;
border-top: 36px solid transparent;
border-bottom: 36px solid transparent;
}
<div class="wrapper">
<div class="arrow">Text</div>
</div>
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>