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

What is the best way to rewrite this?

I am wanting to create a border like the one below, but not sure how I can go about this with CSS, can anyone help?

enter image description here

Current code which has the button that i want this style on.

                <li class="nav-item button">
                    <a class="nav-link" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </a>
                </li>

I have tried using borders, with an outline, also tried borders followed by :before to try and get this working but to no avail.

Tags:

2

Answers


  1. 0

    I’m not matching your button exactly, but enough to give you an idea on how to do it.

    I use border for the white part. Then outline for the outer thin line.

    ul{list-style:none}
.nav-link{
  display:inline-block;
  background:red;
  padding:20px;
  border:10px #fff solid;
  border-radius:50%;
  outline:1px red solid;
  color:#fff;
}
    <ul><li class="nav-item button">
                    <a class="nav-link" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </a>
                </li></ul>
    Login or Signup to reply.
  2. 0

    You may also use shadows to draw bg and outside red circle while you set a transparent border:

    possible example:

    .nav-link {
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  margin: 2.25em;
  aspect-ratio: 1;
  border: 10px transparent solid;
  border-radius: 50%;
  box-shadow: 0 0 1px 2px #FC7753, inset 0 0 0 50px #FC7753;
  vertical-align: top
}

.nav-link svg {
  scale: 3;
  /* ? to match your screenshot ? */
}


/* demo purpose */

html {
  display: grid;
  min-height: 100vh;
  background: #c5c2ab
}

body {
  background: yellow linear-gradient(to top left, transparent, #0008, transparent);
  margin: auto;
}
    <a class="nav-link" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
  </svg>
  </a
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search