I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown.
In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
Thanks a lot in advance!!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Following changes of ::before pseudo-element may work for you and you also have to add ::after pseudo-element for this solution.
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
Related
I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown.
In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
Thanks a lot in advance!!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Following changes of ::before pseudo-element may work for you and you also have to add ::after pseudo-element for this solution.
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.
Any help appreciated.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%);
}
50% {
transform: scale(100%);
}
100% {
transform: scale(0%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I think your problem is similar to this. CSS Animation break transform
Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
display: flex;
}
.center {
margin: auto;
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%) translate(-50%,-50%);
}
50% {
transform: scale(100%) translate(-50%,-50%);
}
100% {
transform: scale(0%) translate(-50%,-50%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 4 years ago.
I try using transform:scale(1.2) to obtain the effect of an appearing circle around the icon. transform I added to the .icon-style:hover::after.
Now this code is commented, please uncomment this code to see what I want to get.
For example I trying doing something like this: click. But scale change position circle.
I read this article, but I don't now how to use transform-origin in my CSS.
Demo: JSFiddle
*{
background-color: black;
}
.pos-footer {
position: absolute;
bottom: 20px;
right: 30px;
}
.icon-social {
display: flex;
}
.icon-social-pos {
position: relative;
}
.icon-style {
position: relative;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.25);
padding: 10px;
border-radius: 50%;
transition: background-color .3s ease-in-out;
}
.icon-style:hover {
background-color: rgba(255, 255, 255, 0.7);
}
.icon-style::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 100%;
height: 100%;
border: 5px solid rgba(255, 255, 255, 0.425);
border-radius: 50%;
padding: 7px;
opacity: 0;
transition: all .4s ease-in-out;
}
.icon-style:hover::after {
opacity: 1;
/* transform: scale(1.2); */
}
.icon-github {
background-image: url("https://img.icons8.com/windows/30/000000/github.png");
margin-right: 10px;
}
.icon-linkedin {
background-image: url("https://img.icons8.com/ios-glyphs/22/000000/linkedin-2.png");
margin-left: 10px;
}
<div class="pos-footer">
<div class="icon-social">
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-github"></div>
</div>
</a>
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-linkedin"></div>
</div>
</a>
</div>
</div>
First of all, the transform in your hover (.icon-style:hover::after) is overwriting your transform: translate(-50%, -50%);. A way to fix it is to add the translate to the hover too:
.icon-style:hover::after {
opacity: 1;
transform: scale(1.2) translate(-50%, -50%);
}
Then you have to define your transform-origin in .icon-style to top left;
*{
background-color: black;
}
.pos-footer {
position: absolute;
bottom: 20px;
right: 30px;
}
.icon-social {
display: flex;
}
.icon-social-pos {
position: relative;
}
.icon-style {
position: relative;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.25);
padding: 10px;
border-radius: 50%;
transition: background-color .3s ease-in-out;
}
.icon-style:hover {
background-color: rgba(255, 255, 255, 0.7);
}
.icon-style::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: top left;
z-index: 1;
width: 100%;
height: 100%;
border: 5px solid rgba(255, 255, 255, 0.425);
border-radius: 50%;
padding: 7px;
opacity: 0;
transition: all .4s ease-in-out;
}
.icon-style:hover::after {
opacity: 1;
transform: scale(1.2) translate(-50%, -50%);
}
.icon-github {
background-image: url("https://img.icons8.com/windows/30/000000/github.png");
margin-right: 10px;
}
.icon-linkedin {
background-image: url("https://img.icons8.com/ios-glyphs/22/000000/linkedin-2.png");
margin-left: 10px;
}
<div class="pos-footer">
<div class="icon-social">
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-github"></div>
</div>
</a>
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-linkedin"></div>
</div>
</a>
</div>
</div>
I want to create a "X" with css spans and position absolute, but the spans aren't centered even if they should.
The container has the font-size of 1px. and a height and width of 100em. Therefore I can use 1em as 1% of the parents size.
I used transform-origin: 0px 5em; on the span, to rotate it without changing the starting point. The Element starts in 20% top and left (20em) and ends in 80% (top and left).
To get the required width i simply calculated: Square root( square of (60) * 2) (Pythagorean theorem) (60 because start and end 20 -- 100-20*2)
But for some reason the X is clearly not centered. Do you know what i did wrong?
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 20em;
left: 20em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 20em;
left: 80em;
}
.check.red:hover span
{
width: 84.852813742em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
This isn't an automatic solution, but changing some values in your css i solved it:
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 18em;
left: 22em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 18em;
left: 78em;
}
.check.red:hover span
{
width: 78em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
There are a few things you can do to make life easier here.
Firstly you can transform origin using a percentage, which means you don't need to calculate it yourself.
You can also position using a percentage, then offset using a transform (again with a percentage) to center no matter the size.
You can also set the width of the cross using a percentage, which will take it size from its parent.
Update:
Change the cross to animate from the top, rather than the center by using background gradients.
.check
{
position: relative;
height: 200px;
width: 200px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 20px;
width: 0%;
background: linear-gradient(to right, white 50%, red 50%);
background-size: 200% 100%;
background-position: left bottom;
top: 50%;
left: 50%;
transform-origin: center;
transition: background 0.3s ease;
}
.check.red span
{
transform: translate(-50%, -50%) rotate(-45deg);
}
.check.red span:last-child
{
transform: translate(-50%, -50%) rotate(-135deg);
}
.check.red:hover span
{
background-position: right bottom;
width: 70%;
}
<div class="check red">
<span></span>
<span></span>
</div>
Try this
use margin-top:-0.5rem;
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s; margin-top:-0.5rem;
}
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s; margin-top:-0.5rem;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 20em;
left: 20em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 20em;
left: 80em;
}
.check.red:hover span
{
width: 84.852813742em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
I'd like to add triangle seperators between the sections of a page. Each section has a transparent background color.
There's a parent div that wraps around the sections and has a fixed background image.
Example of what I'm trying to achieve:
I'm having trouble positioning the seperator/arrow and creating the white border around it.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Name</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="section-1 downarrow">
<p>Section 1</p>
</div>
<div class="section-2">
<p>Section 2</p>
</div>
<div class="section-3">
<p>Section 2</p>
</div>
</div>
</body>
</html>
CSS:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
ul {list-style:none; list-style-position:outside;}
a {outline: none;}
.wrapper {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.section-1 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.section-2 {
height: 500px;
background-color: rgba(95, 20, 20, .9);
}
.section-3 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.downarrow:after,.downarrow:before {
content: '';
position: absolute;
bottom: 0;
width: 50%;
z-index: 100;
border-bottom: 40px solid #fff;
-moz-transform: rotate(0.000001deg);
-webkit-transform: rotate(0.000001deg);
-o-transform: rotate(0.000001deg);
-ms-transform: rotate(0.000001deg);
transform: rotate(0.000001deg)
}
.downarrow:before {
right: 50%;
border-right: 40px solid transparent;
border-left: 1000px solid #fff;
}
.downarrow:after {
left: 50%;
border-left: 40px solid transparent;
border-right: 1000px solid #fff;
}
.downarrow {
overflow: hidden;
}
Any help or suggestions would be greatly appreciated.
Please check the updated one, i made some efforts to make it a look like as per the example image provided. please review the code. Hope it is helpful to you.
Note: Please update dimensions accordingly as per requirement. It is just a dummy.
.wrap {
position: relative;
height:300px;
overflow: hidden;
width: 80%;
margin: 0 auto;
background: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg) no-repeat center center;
overflow:hidden;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
top: 50%;
width: 100%;
padding-bottom:3%;
margin-top: -3%;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
.arrow1 {
position: absolute;
bottom: 50%;
width: 100%;
padding-bottom:3%;
background-color: rgba(0, 0, 0, 0.8);
transform: rotate(180deg);
margin-bottom: -3%;
}
.arrow1:before, .arrow1:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow1:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow1:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
<div class="wrap">
<div class="arrow"></div>
<div class="arrow1"></div>
</div>