All geek questions in one place

Only a border is required for the arrow is not colored

I am trying to implement an arrow as shown below.

For this I need only border not color

Please check this link here

.pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background: red;
  }
  .pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  .pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
<div class="pointer">
    
</div>
Run codeHide result

I expect it to look below: <w640 "

+4
source share
5 answers

I would use before, after and converted the skew. Increases flexibility.

.arrow{
position:relative;
display:inline-block;
min-width:100px;
padding-left:1rem;padding-right:1rem;
text-align:center;
line-height:2;
min-height:2rem;
}
.arrow:before,.arrow:after{
  content:" ";
  z-index:-1;
  display:block;
  position:absolute;
  left:0;
  top:-1px;
  border:2px solid red;
  height:50%;
  width:100%;
}
.arrow:before{
 border-bottom:0;
 transform:skewX(45deg);
}
.arrow:after{
 border-top:0;
 top:50%;
 transform:skewX(-45deg);
}

.left:before{ transform:skewX(-45deg);}
.left:after{transform:skewX(45deg);}

.blue:before,.blue:after{border-color:blue;}

.bgpink:before,.bgpink:after{background-color: pink}
<div class="arrow"></div>
<br/>
<br/>
<br/>
<div class="arrow left"> to the left </div>
<br/>
<br/>
<br/>
<div class="arrow left blue"> and change border color </div>

<br/>
<br/>
<br/>
<div class="arrow left blue bgpink"> and change bg color too </div>
Run codeHide result
+1
source

option 1: use svg instead, only work with moden broswers

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 0 L110 10 L100 20 L0 20 L10 10 Z" fill="transparent" stroke="red"/>
</svg>
Run codeHide result

option 2: use a border, you can change the value to make it smoother

.arrow {
  width: 200px;
  height: 80px;
  position: relative;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.arrow:before,
.arrow:after {
  content: "";
  box-sizing: content-box;
  border: 1px solid transparent;
  width: 80px;
  height: 80px;
  display: block;
  transform: translate(-43px) rotate(45deg) scale(0.708);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.arrow:before {}

.arrow:after {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(42px) rotate(45deg) scale(0.708);
}
<div class="arrow"></div>
Run codeHide result

option 3: use svg as background

.arrow {
  background: url('data:image/svg+xml;utf8,<svg width="200" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L100 0 L110 10 L100 20 L0 20 L10 10 Z" fill="transparent" stroke="red"/></svg>');
  width: 200px;
  height: 20px;
}
<div class="arrow"></div>
Run codeHide result
+3
source 

.pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background: red;
  }
  .pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  .pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  .pointer2 {
    width: 194px;
    height: 36px;
    position: absolute;
    background:white;
    top:2px;
    left:4px
  }
  .pointer2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 18px solid red;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
  }
  .pointer2:before {
    content: "";
    position: absolute;
    right: -18px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 18px solid white;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
  }
<div class="pointer">
<div class="pointer2">
</div>
    
</div>
Hide result

. , css

0

After reading some comments, another solution is presented here using the skew transform , and when you hover it changes to a rectangle .

UPDATE

I added another form that was changed to cirlce

body {
 background:#f2f2f5;
}

.pointer {
  width: 200px;
  height: 40px;
  position: relative;
  margin: 20px;
  transition: 0.5s;
}

.pointer:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50%;
  border: 1px solid red;
  border-bottom: 0;
  transform: skew(35deg);
  transition: 0.5s;
}

.pointer:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid red;
  border-top: 0;
  transform: skew(-35deg);
  transition: 0.5s;
}

.pointer:hover::after,
.pointer:hover::before {
  transform: skew(0deg);
}

.to-cirlce {
  border: 1px solid transparent;
}

.to-cirlce:hover {
  width: 80px;
  height: 80px;
  border: 1px solid red;
  border-radius: 50%;
}

.to-cirlce:hover::after,
.to-cirlce:hover::before {
  border: none
}
<div class="pointer">

</div>

<div class="pointer to-cirlce">

</div>
Run codeHide result
0
source

You can try Data URIsto give an inline background svgusing CSS , as shown below. No need to change HTML

.pointer {
  width: 200px;
  height: 40px;
  position: relative;
  border: 1px solid red;
  border-right: 0;
  border-left: 0;
  box-sizing: border-box;
}

.pointer:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 21px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg width='21' height='41' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L20 20 L0 40' fill='transparent' stroke='red'/></svg>");
}

.pointer:after {
  content: "";
  position: absolute;
  top: -1px;
  right: -21px;
  width: 21px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg width='21' height='41' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L20 20 L0 40' fill='transparent' stroke='red'/></svg>");
}
<div class="pointer"></div>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1691085/

More articles:


All Articles