1
I need to create a dashed edge as in the example below.
In the fig I defined that the trace would have 8px and the space between them also.
.newItemContainer
border-radius: 8px
border: dashed 1px colors.$stroke
The code above was what I used to make the dashed edge, but I don’t know how to specify the values for stroke size and gap.
Can someone help me?
1
You can use a rect of svg 100% container height and width. In the attributes stroke-dasharray: 8; and stroke-dashoffset: 22; you control the dashed line that is actually in the svg :D. No rx="18" ry="18" and in the border-radius in css vc controls the curvature of the card edges.
Code of the image above:
.btn {
display: block;
text-align: center;
width: 160px;
height: 160px;
line-height: 160px;
text-transform: uppercase;
font-family: sans-serif;
text-decoration: none;
font-size: 30px;
transition: 1.5s;
position: relative;
}
svg {
border-radius: 17px;
}
svg,
svg rect {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
fill: transparent;
}
a svg rect {
stroke: blue;
stroke-width: 4;
transition: all 500ms;
stroke-dasharray: 8;
stroke-dashoffset: 22;
}<a href="#" class="btn">
<svg>
<rect x="0" y="0" rx="18" ry="18"></rect>
</svg>
+
</a>Hugo, thank you very much. Although I didn’t apply it, before you answered I ended up locating a Trick css tool that helped manipulate the border using background-image..
@Gabrielfrança cool that solved! And thanks for the force, these tricks with SVG often save the day, but. background-image tb is a very interesting feature! Success, abs!
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
CSS has no control over the space between dashes. Each browser can render this differently. A width, however, it is rendered in a common way, since it is an accepted property information in all browsers.
– Sam