CODEWITHSUNDEEP
cssarrows
user14557728
user14557728

Reputation:

Create CSS curved arrow

I would like to create a curved responsive arrow in CSS. I have a text then the arrow comes and this arrow should point to a Qr code. I tried something and did some research, unfortunately my results look different than expected. How can I create such a curved arrow? I tried this How can I make css curved line? and this https://codepen.io/zomgbre/pen/kmCsp. But nothing brought me to the result as you can see in the picture.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
.graph {
    height: 100px;
    width: 200px;
    background: transparent;
    border-radius: 0px 0px 0px 370px/225px;
    border: solid 5px grey;
    border-top:none;
    border-right:none;
    margin:20px;
}

.graph:before {
    height:20px;
    width: 10px;
    border: 5px solid grey;
    border-radius: 30px 30px 0px 0px /75px 75px 0px 0px ; 
    display: block;
    content: "";
    border-bottom:none;
    position:relative;
    top: -9px;
    left: -12px;
}

.qr {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-lg-4 mb-5 mb-lg-0">
     
      <h3 class="services-title">Try it on your device</h3>
      <p class="text-black-50 services-subtitle">Scan to view it on your mobile device.</p>
    </div>

    <div class="col-lg-4 mb-5 mb-lg-0">
     <div class="graph">
    </div>
    <div class="col-lg-4 mb-5 mb-lg-0">
      <div class="qr">
    </div>
  </div>
</div>

</body>
</html>

Here you can see the curved arrow. This should point to the QR code (it should be resposive):

enter image description here

And here you can see the subdivision in which I wanted to set it.

enter image description here

Upvotes: 1

Views: 3988

Answers (1)

altaf
altaf

Reputation: 11

You could try the following:

/* Pretty Stuff? */
html {
  background: #011F2A;
}

.things > .content {
  float: left;
  width: 50%;
  height: 500px;
  -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
  position: relative;
}

.things > .content h1 {
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  height: 150px;
  color: #89323B;
}

/* Arrow */

.arrow {
    position: relative;
  margin: 0 auto;
  width: 100px;
}

.arrow .curve {
    border: 2px solid #BE5F4B;
    border-color: transparent transparent transparent #BE5F4B;
    height: 360px;
    width: 1200px;
    border-radius: 230px 0 0 150px;
}

.arrow .point {
    position: absolute;
    left: 40px;
    top: 315px;
}

.arrow .point:before, .arrow .point:after {
    border: 1px solid #BE5F4B;
    height: 25px;
    content: "";
    position: absolute;
}

.arrow .point:before {
    top: -11px;
    left: -11px;
    transform:rotate(-74deg);
    -webkit-transform:rotate(-74deg);
  -moz-transform:rotate(-74deg);
  -ms-transform: rotate(-74deg);
}

.arrow .point:after {
  top: -20px;
    left: 5px;
    transform:rotate(12deg);
    -webkit-transform: rotate(12deg);
  -moz-transform:rotate(12deg);
  -ms-transform: rotate(12deg);
}
<div class="things">
  <div class="content">
    <div class="arrow">
      <div class="curve"></div>
      <div class="point"></div>
    </div>
  </div> 
  <div class="content">
    <h1>Curved Arrow</h1>
  </div>
</div>

Upvotes: 1

Related Questions