68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
|
<div class="svg-btn-outline">
|
|
<svg
|
|
class="side left"
|
|
width="16"
|
|
height="28"
|
|
viewBox="0 0 16 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
|
|
stroke="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
<div class="fill">
|
|
<div class="borders" />
|
|
</div>
|
|
|
|
<svg
|
|
class="side right"
|
|
width="16"
|
|
height="28"
|
|
viewBox="0 0 16 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
|
|
stroke="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.svg-btn-outline {
|
|
grid-template-columns: auto 1fr auto;
|
|
display: grid;
|
|
align-items: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
|
|
.side {
|
|
height: 100%;
|
|
|
|
&.right {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
.fill {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.borders {
|
|
position: absolute;
|
|
inset: 0 -1px;
|
|
border: solid currentColor;
|
|
border-width: 1px 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|