I am trying to achieve this;
There is an inner div and outer div. Inner div is rotated 45deg. But I want inner div to transform according to outer div. That is, I can give fixed attributes to outer div only, and inner has to form a ^ according to outer div. How can I do this?
here is the html and css;
<div class="diva"><div class="divb"></div></div>
.diva{
height: 200px;
width: 300px;
background: #CCC;
}
.divb {
position: relative;
padding: 100px 0 0;
height: 100%;
width: 100%;
}
.divb:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-left: solid 4px green;
border-top: solid 4px green;
border-bottom: solid 4px transparent;
border-right: solid 4px transparent;
transform: rotate(45deg);
}
here is the fiddle.
This is a tricky problem, but it is possible. Here is my code:
HMTL:
<div id="a"></div>
CSS:
#a {
position: relative;
background: #ffffff;
position:absolute;
top:50px;
left:50px;
}
#a:after, #a:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#a:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 30px;
margin-left: -30px;
}
#a:before {
border-color: rgba(0, 255, 0, 0);
border-bottom-color: #00ff00;
border-width: 36px;
margin-left: -36px;
}
FIDDLE
I hope this works for you. Good luck!
Related
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
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>
I am trying to create a speech bubble using two divs, one is a triangle and the other is a rectangle.
This is the code:
#box {
width: 200px;
height: 80px;
background-color: #ccc;
position: relative;
left: 300px;
top: 180px;
padding: 5px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
#tri {
position: absolute;
top: -15px;
left: 40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #ccc;
float: left;
margin: 2px 5px 0px 0px;
-moz-box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
<div id="box">
<div id="tri"></div>
Some text
</div>
This problem is that something happens at the point where the triangle connects to the box. The shadow doesn't go around the triangle. Is it possible to fix this so that the shadow goes around the box and continues around the triangle?
Using that technique, you wont be able to place a shadow on the triangle shape.
We can create the triangle with an :after pseudo-element and create the boxes main shadow with a :before pseudo-element.
The Triangle
The triangle looks like a diamond and the background of the box overlaps the diamond to make it look like a triangle:
This: becomes this:
The z-index: -1 places both pseudo-elements underneath their parents background.
The main shadow
The main shadow needs to be placed on a pseudo-element so that it can be overlapped by the triangle background, whilst at the same time, the triangles bottom half is overlapped by the elements background. This image shows the layers:
Full Example
#box {
width: 200px;
height: 80px;
background: #CCC;
position: relative;
left: 300px;
top: 180px;
padding: 5px;
border-radius: 10px;
}
#box:before,
#box:after {
content: '';
position: absolute;
box-shadow: 0 0 5px #333;
z-index: -1;
}
#box:before {
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 10px;
}
#box:after {
background: #CCC;
height: 20px;
width: 20px;
top: -10px;
left: 50%;
margin-left: -5px;
transform: rotate(45deg);
z-index: -1;
}
<div id="box">
Some text
</div>
Use this
DEMO
.arrow_box {
position: relative;
top:150px;
background: #88b7d5;
border: 4px solid #c2e1f5;
width:200px;
height:80px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
No, there's no way to apply a shadow to that triangle. The shadow applies to a div, and divs are square. You could use an image or svg instead.
Or you could try this. Remove the shadow from the triangle and add this code.
#tri:after {
content:'';
position:absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid rgba(0,0,0,.25);
width: 0;
height: 0;
top: -2px;
right: -10px;
z-index: -1;
}
I know it is not the same but, it's something.
try this
<div id="box">
<div class="mask"></div>
<div id="tri"></div>
.mask{
background-color:#ccc;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
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>