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
Related
<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 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>
I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom.
So far I have this:
HTML
<div class="css-shapes"></div>
CSS
.css-shapes{
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
}
http://jsfiddle.net/yhexkm4u/2/
However, I need the background to be white and border around this shape in purple and 1px. I was trying to fit the same shape just in white inside of this one, but everything got messy and didn't go as expected.
Maybe it is a wrong approach, but I want to end up with labels that would look something like this:
With CSS:
You can use CSS transforms on pseudo elements to create the background with a transparent inverted triangle at the bottom:
body{background:url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size:cover;}
p{
position: relative;
width: 150px; height: 150px;
overflow: hidden;
border-top:3px solid #EF0EFE;
}
p:before, p:after{
content: '';
position: absolute;
top: -3px;
height: 100%; width: 50%;
z-index: -1;
border:2px solid #EF0EFE;
box-sizing:border-box;
}
p:before{
left: 0;
transform-origin: 0 0;
transform: skewY(-20deg);
border-width:0 0 4px 3px;
}
p:after{
right: 0;
transform-origin: 100% 0;
transform: skewY(20deg);
border-width:0 3px 4px 0;
}
<p>Some text ... </p>
Note that you will need to add vendor prefixes on the transform and transform-origin properties to maximize browser support. See canIuse for more information.
With SVG
Another approach is to use an inline SVG with the polygon element:
body{background: url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size: cover;}
div{position: relative;width: 100px; height: 150px;}
svg{position: absolute;width: 100%;height: 100%;z-index: -1;}
<div>
<svg viewbox="-1.5 -1.5 103 153">
<polygon points="100 0, 100 100, 50 85, 0 100, 0 0" fill="transparent" stroke-width="3" stroke="#ef0efe"/>
</svg>
<p>Some text ... </p>
</div>
Here is a slightly different method using pseudo-elements and transform rotations to create an outlined banner like this:
This angled shape is created with position: absolute pseudo-elements, :before and :after:
The excess is cut off with overflow: hidden on the parent to form our banner:
The outline is created with box-shadow and the two angles are prevented from overlapping by pulling / pushing the x-axis by 46px — box-shadow: 46px 0 0 3px #000
Full Example
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Text</div>
STOLEN FROM CSS-SHAPES
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
DEMO:
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
<div id="flag"></div>
My Approach
My approach uses skewed elements, and allows you to quickly position them to your needs.
div {
height: 100px;
width: 100px;
position: relative;
border-left: 10px solid tomato;
border-top: 10px solid tomato;
border-right: 10px solid tomato;
text-align: center;
line-height: 100px;
font-size: 30px;
}
div:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
border-bottom: 10px solid tomato;
border-left: 10px solid tomato;
}
div:after {
content: "";
position: absolute;
height: 50%;
width: 50%;
right: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
border-bottom: 10px solid tomato;
border-right: 10px solid tomato;
}
div:hover, div:hover:before, div:hover:after{
background:lightgray;
}
<div>TEXT</div>
I've had a go at updating your CSS to create the effect you want:
.css-shapes {
height: 250px;
width: 0px;
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
position: relative
}
.n-shape {
height: 248px;
width: 0px;
border-left: 95px solid #ffffff;
border-right: 95px solid #ffffff;
border-bottom: 39px solid transparent;
position: absolute;
top: -6px;
right: -95px;
}
.top {
position: absolute;
top: 0px;
width: 198px;
height: 2px;
background-color: #f00fff;
left: -99px;
border-bottom: 1px solid #f00fff;
}
<div class="css-shapes">
<div class="n-shape"></div>
<div class="top"></div>
</div>
Fiddle: http://jsfiddle.net/dywhjwna/
Here is what I came up with.
Link Fiddle
It correspond to what you were looking for however I guess there should be a "better way" to it rather than playing with border.
HTML
<div id="text-div">
Text
</div>
<div id="pacman">
<div id="left-triangle"></div>
<div id="right-triangle"></div>
</div>
CSS
#text-div {
width: 118px;
height: 60px;
text-align: center;
border: 1px solid purple;
border-bottom: 0px;
line-height: 60px;
}
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 0px;
border-left: 60px solid purple;
border-bottom: 60px solid transparent;
}
#left-triangle{
position: relative;
left: -59px;
border-right: 58px solid transparent;
border-top: 0px;
border-left: 58px solid white;
border-bottom: 58px solid transparent;
}
#right-triangle{
position: relative;
top: -59px;
left: -57px;
border-right: 58px solid white;
border-top: 0px;
border-left: 58px solid transparent;
border-bottom: 58px solid transparent;
}
A quick workaround is to rotate it:
transform: rotate(90deg);
Fiddle
Another solution would be an SVG path, here's a fiddle!.
A better solution with text easily positioned in the middle, using a rectangle background and a triangle at the bottom.
.css-shapes{
position: relative;
height: 250px;
width: 150px;
background: #FFD05B;
color: #fff;
text-align: center;
line-height:225px;
font-size: 90px;
box-sizing: border-box;
}
.css-shapes:after{
content: '';
position:absolute;
left:0;
bottom: 0;
display: block;
width: 100%;
height:50px;
border-bottom: 25px solid #fff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
box-sizing: border-box;
}
<div class="css-shapes">1</div>
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>
I want to create a ribbon effect like on this image (the red part of image):
When I try to create an arrow effect with borders, the shape of object is completely destroyed:
HTML code:
Kategorija
CSS code so far (without trying to create the arrow):
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
Any idea how can I create this?
Made a fiddle here. Couldn't solve it without a b tag though. I used b because it is so small
HTML
Kategorija<b></b>
CSS
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
box-shadow: 3px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #760000 transparent transparent #760000 ;
}
.mali_oglas_kategorija b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #760000 #760000 ;
}
body { padding: 50px;}
you could also use a skewed element if this was required for hit-testing as well.
Something like:
.rib {
margin-left: 20px;
height: 40px;
width: 200px;
position: relative;
background: gray;
color: white;
line-height: 40px;
text-align: center;
}
.rib:before,
.rib:after {
content: "";
position: absolute;
right: -10px;
top: 0;
height: 50%;
width: 40px;
background: inherit;
}
.rib:before {
transform: skewX(-45deg);
}
.rib:after {
transform: skewX(45deg);
top: 50%;
}
.shad {
position: absolute;
height: 40px;
width: 20px;
top: 0%;
left: 0;
background: dimgray;
transform-origin: top left;
transform: skewY(45deg);
z-index: -1;
box-shadow:inset 0 0 10px black;
}
<div class="rib">123
<div class="shad">
</div>
</div>