<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?
Related
I am trying to apply shadow to the whole shape. But the shape defined with ::after is not affected. How do i work with the shape as a unit?
style.css
.diag{
position: relative;
top: 0px;
left: 100px;
width: 150px;
height: 90px;
background-color: gray;
border-radius: 10px;
}
.diag::after{
content: "";
position: absolute;
left: -50px;
top: 35px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 50px solid gray;
border-bottom: 10px solid transparent;
}
.diag:hover{
box-shadow: 2px 2px 2px 2px;
}
You can try this:
.diag {
position: relative;
top: 0px;
left: 100px;
width: 150px;
height: 90px;
background-color: gray;
border-radius: 10px;
}
.diag::after {
content: "";
position: absolute;
left: -50px;
top: 35px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 50px solid gray;
border-bottom: 10px solid transparent;
}
.diag:hover {
box-shadow: 0px 0px 4px 4px black;
}
<div class="diag">
</div>
I need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
How do I create a non-rectangular border like in this image?
Current Code: http://jsfiddle.net/bqjr5wep/
div {
background:#1c1c1c;
width:400px;
height:200px;
position:relative;
}
div:before, div:after {
content:'';
display:block;
left:10px;
right:10px;
top:10px;
bottom:10px;
border:2px solid #FFF;
position:absolute;
}
div:after {
left:14px;
top:14px;
right:14px;
bottom:14px;
}
Sample 1: Transparent background for shape with non-solid page background
Here is an approach which supports non-solid background for the page (gradient or image), transparent background for the shape and also is scalable. The downside probably is the fact that it requires more than one element.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 2: Solid color (non-transparent) background for shape
If the shape needs to have a different background compared to the page background and the shape's background is a solid color then the same approach with a small modification can be used. Sample is provided below:
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 3: Gradient/Image background for shape
You can also add an image (or) gradient different from the page background to the shape's background and it would look like in the below snippet. It cannot follow the outer border of the shape exactly.
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
background: url(http://lorempixel.com/600/600);
}
.shape:after {
position: absolute;
content: '';
top: -4px;
left: 10px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 2px 2px 0px 0px;
}
.shape:before {
position: absolute;
content: '';
top: 10px;
left: -4px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before {
position: absolute;
content: '';
height: 12px;
width: 12px;
top: -6px;
left: -6px;
border: 2px solid white;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
bottom: -6px;
right: -6px;
border: 2px solid white;
border-width: 2px 0px 0px 2px;
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 4: Semi-transparent background for shape
This is the trickiest of the lot but can still be achieved by doing some minor modifications to the snippet. The idea for this was picked from this thread.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: rgba(80, 80, 80, 0.75);
border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
opacity: 0.75;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
background: linear-gradient(180deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(270deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
background: linear-gradient(0deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(90deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/400/200/sports/Dummy-Text/);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
I just created a simple SVG image and used the CSS border-image to create the desired effect.
http://jsfiddle.net/bqjr5wep/1/
div {
width:80%;
height: 200px;
position: relative;
margin:50px auto;
background-color: #1c1c1c;
}
div:before, div:after {
content:'';
display: block;
position: absolute;
left: 10px;
top:10px;
right: 10px;
bottom: 10px;
}
div:before {
border-style: solid;
border-width: 16px;
-moz-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
-webkit-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
-o-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
border-image: url('http://imgh.us/border_1.svg') 16 repeat;
}
div:after {
border:2px solid #FFF;
left:14px;
top:14px;
right:14px;
bottom:14px;
}
Try This
CSS:
.wrap{
width: 400px;
height: auto;
position: relative;
background: #000;
overflow: hidden;
padding: 20px;
}
.border-1{
width: 400px;
height: 200px;
position: relative;
border: 1px solid #fff;
}
.border-2{
width: 391px;
height: auto;
position: absolute;
border: 1px solid #fff;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
margin: auto;
z-index: 3;
}
.top-1{
position: absolute;
top: -2px;
left: -2px;
width: 10px;
height: 10px;
background: #000;
z-index: 2;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
.bottom-1{
position: absolute;
bottom: -1px;
right: -1px;
width: 10px;
height: 10px;
background: #000;
z-index: 2;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
Hope it helps :) Happy Coding.
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>