I am trying to style this arrow but i have been unable to get this exact style.
here is image of what i want to achieve
here is image of what i am getting
HTML Code:
<div className="arrow-div">
<p>2. Summary</p>
</div>
CSS Code:
.arrow-div {
width: 209px;
height: 56px;
display: inline-flex;
margin: 54px 10px;
border: 1px solid #d2d6dc;
clip-path: polygon(75% 0%, 84% 50%, 75% 100%, 0% 100%, 9% 53%, 0% 0%);
padding: 18px 3px 18px 32px;
}
.arrow-div {
height: 50px;
width: 100px;
padding-left: 20px;
display: inline-block;
position: relative;
margin-left: 20px;
}
.arrow-div:before,
.arrow-div:after {
content: '';
left: -15px;
position: absolute;
height: 23px;
width: 132px;
border-left: 2px solid #0f3c80;
border-right: 2px solid #0f3c80;
}
.arrow-div:before {
border-top: 2px solid #0f3c80;
transform-origin: 0% 0%;
transform: skewX(30deg);
top: 0;
}
.arrow-div:after {
border-bottom: 2px solid #0f3c80;
transform-origin: 0% 100%;
transform: skewX(-30deg);
bottom: 0;
}
p {
color: #0f3c80;
<div class="arrow-div">
<p>2. Summary</p>
</div>
Related
I'm trying to achieve the shape as shown in this image:
To have 2 rectangle divs with cut corners , and 1 div positioned behind another div.
But the corners seems incorrect and I can't find the way to show the borders of the shapes.
.wrapper {
display: flex;
justify-content: center;
}
.connect {
width: 254px;
height: 50px;
background: red;
background: #FF2D5069;
border-top: 2px solid #FF2175;
position: absolute;
bottom: 0;
z-index: 5;
}
.connect::before {
content: '';
position: absolute;
bottom: 0;
right: -2px;
border-top: 52px solid white;
border-left: 42px solid transparent;
}
.connect::after {
content: '';
position: absolute;
bottom: 0;
left: -2px;
border-top: 52px solid white;
border-right: 42px solid transparent;
}
.connect-behind {
width: 300px;
height: 44px;
background: red;
background: #FF2D5069;
border-top: 2px solid #FF2175;
position: absolute;
bottom: 0;
}
.connect-behind::before {
content: '';
position: absolute;
bottom: 0;
right: -2px;
border-top: 46px solid white;
border-left: 26px solid transparent;
}
.connect-behind::after {
content: '';
position: absolute;
bottom: 0;
left: -2px;
border-top: 46px solid white;
border-right: 26px solid transparent;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
I took reference from other threads to use behind and after for the solution but it doesn't seem working correct for my problem. Please help, thanks.
You could use perspective and transform:
possible example (for infos : with grid instead absolute) :
.wrapper {
display: grid;
justify-content: center;
align-items: end;
height: 300px;
perspective: 50px;
}
.connect,
.connect-behind {
transform: rotatex(50deg);
background: red;
margin: 0 auto;
background: #FF2D5069;
border-top: 2px solid #FF2175;
grid-row: 1;
grid-column: 1;
transform-origin: bottom center;
}
.connect-behind {
width: 300px;
height: 44px;
}
.connect {
width: 254px;
height: 50px;
;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
to draw a border around the shape, drop-shadow could be usefull
.wrapper {
display: grid;
justify-content: center;
align-items: end;
height: 300px;
perspective: 50px;
filter:
drop-shadow( 1px 0px 0 )
drop-shadow(-1px 0px 0 )
drop-shadow( 0px 1px 0 )
drop-shadow( 0px -1px 0 );
}
.connect,
.connect-behind {
transform: rotatex(50deg);
background: red;
margin: 0 auto;
background:white;
grid-row: 1;
grid-column: 1;
transform-origin: bottom center;
background:#ffa500;
}
.connect-behind {
width: 254px;
height: 50px;
border-left:solid 2px;
border-right:solid 2px;
}
.connect {
background:#ed1c24;
width: 300px;
height: 44px;
;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
You can use clip-path for things like this. Works well in a ( I think ) most browsers. Some, like ie11 and older browsers won't render it correctly, though, so you may need a fallback for those cases.
body {
overflow: hidden;
}
.wrapper {
display: flex;
justify-content: center;
}
.connect {
width: 254px;
height: 80px;
background: red;
background: #FF2D5069;
border-top: 2px solid black;
position: absolute;
bottom: 0;
z-index: 5;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.connect-border-left {
height: 80px;
width: 2px;
background: black;
left: calc(50% - 131px);
position: absolute;
bottom: -12px;
transform: rotate(34deg) translateX(-50%);
display: inline-block;
}
.connect-border-right {
height: 80px;
width: 2px;
background: black;
right: calc(50% - 131px);
position: absolute;
bottom: -12px;
transform: rotate(-34deg) translateX(-50%);
display: inline-block;
}
.connect-behind {
width: 300px;
height: 60px;
background: red;
background: #FF2D5069;
border-top: 2px solid black;
position: absolute;
bottom: 0;
clip-path: polygon(14% 0%, 86% 0%, 100% 100%, 0% 100%);
}
.connect-behind-border-right {
height: 100px;
width: 2px;
background: black;
right: calc(50% - 103px);
position: absolute;
bottom: -11px;
transform: rotate(-32deg) translateX(-50%);
display: inline-block;
}
.connect-behind-border-left {
height: 100px;
width: 2px;
background: black;
left: calc(50% - 103px);
position: absolute;
bottom: -11px;
transform: rotate(32deg) translateX(-50%);
display: inline-block;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-border-left"></div>
<div class="connect-border-right"></div>
<div class="connect-behind"></div>
<div class="connect-behind-border-left"></div>
<div class="connect-behind-border-right"></div>
</div>
an idea with skew transformation, clip-path and multiple background:
.box {
--b:3px; /* border width */
--t:20px; /* top part width */
--s:30px; /* side part width */
margin:10px;
display:inline-block;
width:250px;
height:150px;
position:relative;
}
.box::before,
.box::after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:50%;
border-style:solid;
border-width:var(--b) 0 0 var(--b);
background:
linear-gradient(black 0 0) 0 var(--t)/100% var(--b),
linear-gradient(black 0 0) var(--s) 0/var(--b) 100%,
linear-gradient(red 0 0) left/var(--s) 100%,
orange;
background-repeat:no-repeat;
transform-origin:bottom right;
transform:skew(-20deg);
clip-path:polygon(0 calc(var(--t) + var(--b)), calc(var(--s) + var(--b)) calc(var(--t) + var(--b)),calc(var(--s) + var(--b)) 0,60% 0,100% 100%,0 100%);
}
.box::after {
transform:scale(-1,1) skew(-20deg);
}
<div class="box"></div>
<div class="box" style="--b:2px;--t:30px;--s:15px;"></div>
So I've managed to create a CSS Triangle with 3 different coloured borders. It can be seen here: https://codepen.io/nuul/pen/oNbeZey
CSS code:
$bg: #0000e5
$color: ((#00007c, #0000e5), (#0000b0, #0000e5), (#0000ff, #0000e5))
#mixin linear-gradient($direction, $gradients...)
background-image: linear-gradient($direction, $gradients...)
#function colorL($some-color, $num)
#return nth($some-color, $num)
#for $i from 1 through length($color)
.sq-#{$i}
#include linear-gradient(colorL(nth($color, $i), 2) 60%, colorL(nth($color, $i), 1) 75%)
$height: 9px
$width: $height * 3.47
body
background: #3D4849
.blueCore
position: absolute
left: 5px
top: 15px
.sq-wrapper
width: $width
height: $height
font-size: 0
display: inline-block
clip-path: polygon(50% 0%, 0 100%, 100% 100%)
position: absolute
left: 0
top: $height
transform-origin: 50% 0
.sq-1-wrapper
transform: rotate(0deg)
.sq-2-wrapper
transform: rotate(240deg)
.sq-3-wrapper
transform: rotate(-240deg)
.sq
width: 100%
height: 100%
.blueBlock
background-color: #0000e5
border: 3px solid
border-top-color: #0000ff
border-right-color: #00007c
border-bottom-color: #00007c
border-left-color: #0000ff
width: 42px
height: 42px
position: relative
z-index: 10
Though I am happy with the result, I am still wondering if the CSS code for this can be simplified (since there is a lot of CSS code needed for just a triangle). Perhaps with a :before :after? The looks should stay the same
Any thoughts?
ps: You can ignore the square around it, I just want to put it in a div for future usage
Thanks!
In terms of your question, I wouldn't recommend using CSS for this and maybe in this situation, an image or even font-awesome would be more efficient. However, you could possibly tweak something like below. It uses two elements to create this shape.
.outer {
position: relative;
height: 200px;
width: 200px;
background: dimgray;
}
.outer:before {
/*Bottom Border Here*/
content: "";
position: absolute;
height: 10%;
width: 90%;
left: 5%;
top: 88%;
z-index: 10;
background: darkblue;
transform: perspective(100px) rotateX(60deg);
}
.outer:after {
/*Triangle Background*/
content: "";
position: absolute;
width: 0;
left: 10px;
bottom: 10px;
border-top: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 150px solid blue;
}
.inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.inner:before {
content: "";
position: absolute;
height: 10%;
width: 90%;
left: -17%;
top: 50%;
background: lightblue;
/*Left border colour here*/
transform: rotate(121deg) perspective(100px) rotateX(60deg);
}
.inner:after {
content: "";
position: absolute;
height: 10%;
width: 90%;
right: -18%;
top: 50%;
background: rgb(0, 0, 220);
/*right border colour here*/
transform: rotate(-120deg) perspective(100px) rotateX(60deg);
}
/*demo only*/
.outer:hover:before { background: darkred;}
.outer:hover:after { border-bottom-color: red;}
.outer:hover .inner:before { background: tomato;}
.outer:hover .inner:after { background: rgb(220, 0, 0);}
<div class="outer">
<div class="inner"></div>
</div>
one element and responsive solution:
.box {
width: 200px;
display: inline-flex;
background:
conic-gradient(at 50% 20px, red 150deg, #0000 0 210deg, green 0)
blue;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.box::before {
content: "";
padding-top: calc(86.6% - 10px);
width: 100%;
box-sizing: border-box;
border:solid transparent;
border-bottom-color: gold;
border-width: 0 18px 10px 18px;
}
<div class="box"></div>
<div class="box" style="width:150px;"></div>
<div class="box" style="width:50px;"></div>
I want to make the following design:
I tried with :after and :before but it does not work. Here’s my current code:
.design {
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
}
.design:before {
border-top: 43px solid #ea053a;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 55px;
margin-top: 100px;
width: 128px;
}
<div class="design"></div>
How could I leave it the same as the original design and with the following two properties?:
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
background-image: linear-gradient(to bottom, #ea053a, #d0021b);
Here is an idea with skew transformation and drop-shadow filter. You simply need some extra element to correctly have the gradient. The trick is to invert the skew to keep the gradient direction correct (not needed if we deal with solid color)
.box {
width: 150px;
height: 150px;
position: relative;
z-index:0;
overflow: hidden;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
}
.box span {
position: absolute;
z-index:-1;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.box span:first-of-type {
left: 0;
transform: skewY(35deg);
transform-origin: top right;
}
.box span:last-of-type {
right: 0;
transform: skewY(-35deg);
transform-origin: top left;
}
.box span::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, blue , red );
transform-origin: inherit;
}
.box span:first-of-type::before {
transform: skewY(-35deg);
}
.box span:last-of-type::before {
transform: skewY(35deg);
}
p {
margin:0;
color:#fff;
font-size:45px;
line-height:100px;
text-align:center;
}
<div class="box">
<span></span><span></span>
<p>29</p>
</div>
Here is how we can do with a left or right gradient. In this case we don't need extra elements because the skew will not affect the direction:
.box {
width: 150px;
height: 150px;
position: relative;
z-index:0;
overflow: hidden;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
}
.box:before,
.box:after{
content:"";
position: absolute;
z-index:-1;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
background:linear-gradient(to right,blue,red);
background-size:200% 100%;
}
.box:before{
left: 0;
transform: skewY(35deg);
transform-origin: top right;
}
.box:after{
right: 0;
transform: skewY(-35deg);
transform-origin: top left;
background-position:right;
}
p {
margin:0;
color:#fff;
font-size:45px;
line-height:100px;
text-align:center;
}
<div class="box">
<p>29</p>
</div>
And here is with an arbitrary gradient:
.box {
--g:linear-gradient(45deg,blue,red 60%,yellow); /* gradient coloration*/
width: 150px;
height: 150px;
margin:15px;
display:inline-block;
position: relative;
z-index:0;
overflow: hidden;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
}
.box span {
position: absolute;
z-index:-1;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.box span:first-of-type {
left: 0;
transform: skewY(35deg);
transform-origin: top right;
}
.box span:last-of-type {
right: 0;
transform: skewY(-35deg);
transform-origin: top left;
}
.box span::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--g);
background-size:200% 100%;
transform-origin: inherit;
}
.box span:first-of-type::before {
transform: skewY(-35deg);
}
.box span:last-of-type::before {
transform: skewY(35deg);
background-position:right;
}
p {
margin:0;
color:#fff;
font-size:45px;
line-height:100px;
text-align:center;
}
<div class="box">
<span></span><span></span>
<p>29</p>
</div>
<div class="box" style="--g:linear-gradient(-62deg,blue,red 60%,yellow)">
<span></span><span></span>
<p>29</p>
</div>
Since each element is taking 50% of the width we make the background to be 200% to have its size as the main container then we adjust the position to create the illusion of one background. It's like each element will show half of the main background.
An optimized version using mask
.box {
width: 150px;
height: 150px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
}
.box > div {
height: 100%;
background: linear-gradient(35deg, blue, red);
-webkit-mask:
linear-gradient(#fff, #fff) top/100% 70%,
linear-gradient(to bottom right, #fff 49.5%, transparent 50%) bottom right/50% 30%,
linear-gradient(to bottom left, #fff 49.5%, transparent 50%) bottom left /50% 30%;
mask:
linear-gradient(#fff, #fff) top/100% 70%,
linear-gradient(to bottom right, #fff 49.5%, transparent 50%) bottom right/50% 30%,
linear-gradient(to bottom left, #fff 49.5%, transparent 50%) bottom left /50% 30%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
p {
margin: 0;
color: #fff;
font-size: 45px;
line-height: 100px;
text-align: center;
}
<div class="box">
<div>
<p>29</p>
</div>
</div>
Or clip-path
.box {
width: 150px;
height: 150px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
}
.box > div {
height: 100%;
background: linear-gradient(35deg, blue, red);
clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
}
p {
margin: 0;
color: #fff;
font-size: 45px;
line-height: 100px;
text-align: center;
}
<div class="box">
<div>
<p>29</p>
</div>
</div>
You can use clip-path as I did. Here is my solution.
.design {
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
}
.month {
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
}
.day {
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
}
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>
If you change your CSS to the following minor changes, then you can achieve the result that you have expected:
.design {
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
}
.design:before {
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
}
Here is the working of the above CSS:
.design {
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
}
.design:before {
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
}
<div class="design">
</div>
Hope this was helpful.
My Fiddle
Change to (only changed lines listed, keep everything else as-is):
.design:before {
...
border-left: 114px solid transparent;
border-right: 114px solid transparent;
...
width: 0;
}
Here is my solution to add shadow and gradient to the shape
.design {
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
}
.triangle {
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
}
<div class="design">
<div class="triangle">
</div>
</div>
i am making block with arrow and border looks like
And i have tried this.
* {
box-sizing: border-box;
}
.block-arr {
background: purple;
margin: 20px;
margin-right: 100px;
position: relative;
}
.block-arr .inner {
min-height: 100px;
display: flex;
padding: 20px;
align-items: center;
position: relative;
}
.block-arr .inner:after {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid purple;
content: '';
position: absolute;
left: 100%;
top: 0;
}
.block-arr:after {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid purple;
content: '';
position: absolute;
left: 100%;
top: 0;
}
<div class="block-arr">
<div class="inner">
<strong>Main Heading</strong>
<span>Sub Heading</span>
</div>
</div>
How can i make block like image? And can we make this arrow height responsive?
I would consider a mix of skew transformation, inset box-shadow and some linear-gradient:
* {
box-sizing: border-box;
}
.block-arr {
padding: 50px;
margin: 20px;
margin-right: 100px;
position: relative;
background: linear-gradient(#fff, #fff)2px 0/2px 100% no-repeat, purple;
border-left: 2px solid purple;
z-index: 0;
}
.block-arr:before {
content: "";
position: absolute;
top: 0;
bottom: 50%;
left: 0;
right: 0;
background: purple;
border: 5px solid purple;
border-bottom: none;
border-left: none;
box-shadow: -2px 2px 0px #fff inset;
transform: skew(25deg);
transform-origin: top left;
z-index: -1;
}
.block-arr:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
background: purple;
border: 5px solid purple;
border-top: none;
border-left: none;
box-shadow: -2px -2px 0px #fff inset;
transform: skew(-25deg);
transform-origin: bottom left;
z-index: -1;
}
<div class="block-arr">
<strong>Main Heading</strong>
<span>Sub Heading</span>
</div>
<div class="block-arr">
<strong>Main Heading</strong><br/>
<span>Sub Heading</span>
</div>
<div class="block-arr">
</div>
And here is a more compressed version with some CSS variable to easily handle color. You can also do the same to handle others variables:
* {
box-sizing: border-box;
}
.block-arr {
--c1:purple;
--c2:#fff;
padding: 50px;
margin: 20px;
margin-right: 100px;
position: relative;
background: linear-gradient(var(--c2), var(--c2))2px 0/2px 100% no-repeat, var(--c1);
border-left: 2px solid var(--c1);
z-index: 0;
}
.block-arr:before,
.block-arr:after {
left: 0;
right: 0;
content: "";
position: absolute;
background: var(--c1);
border: 5px solid var(--c1);
border-left: none;
z-index: -1;
}
.block-arr:before {
top: 0;
bottom: 50%;
border-bottom: none;
box-shadow: -2px 2px 0px var(--c2) inset;
transform: skew(25deg);
transform-origin: top left;
}
.block-arr:after {
top: 50%;
bottom: 0;
border-top: none;
box-shadow: -2px -2px 0px var(--c2) inset;
transform: skew(-25deg);
transform-origin: bottom left;
}
<div class="block-arr">
</div>
<div class="block-arr" style="--c1:red;--c2:yellow">
<strong>Main Heading</strong>
<span>Sub Heading</span>
<p>And yes it is reponsive and grow when height grow</p>
</div>
BONUS
Another fancy and more complex way with only linear-gradient:
* {
box-sizing: border-box;
}
.block-arr {
--c1:purple;
--c2:#fff;
padding: 50px;
margin: 20px;
margin-right: 100px;
position: relative;
border:1px solid;
background:
linear-gradient(to top left,transparent calc(50% + 4px),var(--c2) calc(50% + 4px),var(--c2) calc(50% + 6px),transparent 0) 100% 100%/50px 50% no-repeat,
linear-gradient(to bottom left,transparent calc(50% + 4px),var(--c2) calc(50% + 4px),var(--c2) calc(50% + 6px),transparent 0) 100% 0/50px 50% no-repeat,
linear-gradient(var(--c2),var(--c2)) 4px calc(100% - 4px)/calc(100% - 58px) 2px no-repeat,
linear-gradient(var(--c2),var(--c2)) 4px 4px/calc(100% - 58px) 2px no-repeat,
linear-gradient(var(--c2),var(--c2)) 4px 4px/2px calc(100% - 8px) no-repeat,
linear-gradient(to top left ,transparent 50%,var(--c1) 50%) 100% 100%/50px 50% no-repeat,
linear-gradient(to bottom left,transparent 50%,var(--c1) 50%) 100% 0/50px 50% no-repeat,
linear-gradient(var(--c1),var(--c1)) 0 0/calc(100% - 50px) 100% no-repeat;
}
<div class="block-arr">
</div>
Using :after and :before pseudo elements, i have made this design.
Hope it fulfills your requirement.
Thanks
CSS and HTML:
* {
box-sizing: border-box;
}
p { margin:0; }
.block-arr {
background: purple;
margin: 20px;
margin-right: 100px;
position: relative;
}
.block-arr .inner {
min-height: 100px;
/*display: flex;*/
padding: 20px;
align-items: center;
position: relative;
}
.block-arr .inner:after {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid purple;
content: '';
position: absolute;
left: 100%;
top: 0;
}
.block-arr:after {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid purple;
content: '';
position: absolute;
left: 100%;
top: 0;
}
.bordered { position:relative; border:1px solid #fff; border-right:none; display: flex; align-items: center; padding:20px; }
.bordered:before, .bordered:after {
content: "";
position: absolute;
height: 72%;
width: 1px;
background: #fff;
top: 0;
right: 0;
z-index: 4;
}
.bordered:before {
transform: rotate(45deg);
top: auto;
right: -3.3%;
bottom: -11%;
}
.bordered:after {
transform: rotate(-45deg);
top: -12%;
right: -3.3%;
}
<div class="block-arr">
<div class="inner"><div class="bordered">
<p><strong>Main Heading</strong>
<span>Sub Heading</span></p>
</div></div>
</div>
I want to put a content inside star shape symbol. Finding it difficult to use only css and not an svg. I tried something like this: https://css-tricks.com/examples/ShapesOfCSS/ but it does not work.
One way is using an SVG's but they are hard on responsiveness, as I need to have additional jquery/js functions there.
So wondering is there any other ways of achieving this.
You can use clip path (Clippy is a good generator) to create the star, and align the text vertically using a pseudo element.
Note: Clip path on DOM elements is currently supported only by Chrome, Firefox, and their mobile versions.
.star {
height: 100px;
width: 100px;
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
text-align: center;
background: red;
color: white;
}
.star::before {
display: inline-block;
height: 100%;
background: blue;
vertical-align: middle;
content: '';
}
<div class="star">100</div>
You could wrap the star in a container with some flexbox properties. Add your content and use position: absolute to center it...
code for star from css tricks
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
height: 100vh;
}
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
.wrapper span {
position: absolute;
color: white;
font-size: 48px;
}
<div class="wrapper">
<div id="star-five"></div>
<span>2</span>
</div>
<html>
<head>
<style>
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
#item {
margin-top: -75px;
left: 75px;
position: absolute;
}
</style>
</head>
<body>
<div>
<div id="star-five">
</div>
<div id="item">
ITEM
</div>
</div>
</body>
</html>
This works just change position and manipulate margin!
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.star{position:relative; display:inline-block;}
.star i{font-size:68px;}
.star-content{position: absolute;top: 37%; left: 37%; z-index: 999999; text-align: center; }
.star-content span{color: #fff;}
</style>
</head>
<body>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<div class="star-content">
<span>01</span>
</div>
</div>
</body>
</html>
You can set your star as Unicode character and use absolute positioning to move number inside star. There you can set CSS properties color and font-size to use color and font-size.
.star {
font-size: 75px;
color: cornflowerblue;
position: relative;
display: inline-block;
}
.star:after {
content: "1";
font-size: 16px;
color: white;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -20%);
}
<div class="star">★</div>