Question 205328 in Html Question posted in
Some basic documentation can be found here.

Html – How to adjust my dropdown list (Arrow) and make it rounded

am trying to adjust my dropdown list (Arrow) and make it rounded, tried several times, but it does’t work.

Is there any solution for my issue? Thanks in advance 🙂

Image of my dropdown list Arrow

so my goal is to achieve same rounded arrow in the image below

below is my code, but when i add (border-radius) or (border) its not working at all.

.arw {
user-select: none;
width: 1em;
height: 1em;
display: inline-block;
fill: currentcolor;
flex-shrink: 0;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.5rem;
position: absolute;
left: 4px;
top: calc(52% - 0.5em);
pointer-events: none;
color: rgba(0, 0, 0, 0.54);

}

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    this when i added the above code


  2. 0

    As I can understand that’s SVG, you can edit your SVG curve path in illustrator or any other vector graphic editor, here is simple online tool which might help. Otherwise you can use HTML + CSS pseudo-classes to achieve that. Here is what you can do:

    .arw {
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  border-top-right-radius: 50%;
  background-color: #ccc7ce;
  text-align: left;
  display: inline-block;
  margin: 1rem;
  transition: background-color 0.45s ease;
}
.arw:before,
.arw:after {
  content: "";
  position: absolute;
  background-color: inherit;
  width: 100%;
  height: 100%;
  border-top-right-radius: 50%;
}
.arw.down {
  transform: rotate(-120deg) skewX(-30deg) scale(1, 0.866);
  transform-origin: 30% 45%;
}
.arw:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
}
.arw:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
    <div class="arw down"></div>

    Just adjust .trangle border-top-right-radius: 50%; and .trangle :after/:before border-top-right-radius: 50%;

    Rounded arrow SVG:

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="87px" height="87px" viewBox="-1.7 -1.7 20.40 20.40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-triangle-down" fill="#757575" stroke="#757575">

<g stroke-width="0"/>

<g stroke-linecap="round" stroke-linejoin="round"/>

<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M10.106,12.69 C9.525,13.27 8.584,13.27 8.002,12.69 L1.561,6.246 C0.979,5.665 0.722,4.143 2.561,4.143 L15.549,4.143 C17.45,4.143 17.131,5.664 16.549,6.246 L10.106,12.69 L10.106,12.69 Z" fill="#434343" class="si-glyph-fill"> </path></g>

</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search