How to make angles around button like that? - html

Question

i need to make angles around the button.
I have tried made by ::after ::before, but i cant
Original: bottom of this site
https://kirarock.team/
[enter image description here][1]
my code is here
https://codepen.io/Artyom2022/pen/LYmoaOY
[1]: https://i.stack.imgur.com/M0qgS.png
Thanks in advance

Answer 1

I have used SCSS
for made angles i have used transform-origin;
$clip_input: polygon(2% 0, 100% 0, 100% 100%, 7% 100%);
$clip_submit: polygon(85% 0, 97% 51%, 85% 100%, 15% 100%, 3% 50%, 15% 0);
$border-color: #fff;
.form {
display: grid;
grid-template: 1fr / repeat(2, 1fr);
gap: 70px;
}
.button {
grid-column: 1/3;
align-self: center;
justify-self: center;
text-align: center;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
&__wrapper {
background-color: #00c9ff;
clip-path: polygon(85% 0, 97% 51%, 85% 100%, 15% 100%, 3% 50%, 15% 0);
padding: 2px;
display: inline-block;
input {
clip-path: polygon(85% 0, 97% 51%, 85% 100%, 15% 100%, 3% 50%, 15% 0);
background-color: black;
border: none;
padding: 15px 57px;
color: #00c9ff;
font-weight: 100;
font-size: 2rem;
line-height: 130%;
text-align: center;
letter-spacing: 0.3em;
text-transform: uppercase;
cursor: pointer;
font-family: RobotoCondensed, sans-serif !important;
.button:hover {
background-color: #00c9ff;
color: black;
}
}
}
span:first-child {
margin-right: 25px;
justify-self: end;
top: 0;
display: grid;
&::before {
transform-origin: bottom right;
display: inline-block;
content: '';
background-color: #00C9FF;
width: 1px;
transform: rotate(45deg);
}
&::after {
transform-origin: top left;
display: inline-block;
content: '';
background-color: #00C9FF;
width: 1px;
transform: rotate(-45deg);
}
}
span:last-child {
margin-left: 25px;
justify-self: start;
top: 0;
display: grid;
&::before {
transform-origin: bottom right;
display: inline-block;
content: '';
background-color: #00C9FF;
width: 1px;
transform: rotate(-45deg);
}
&::after {
transform-origin: top left;
display: inline-block;
content: '';
background-color: #00C9FF;
width: 1px;
transform: rotate(45deg);
}
}
<div class="button">
<span></span>
<div class="button__wrapper"><input class="submit" type="submit" value="Send">
</div>
<span></span>
</div>