Search code examples
htmlcsscss-shapes

How to make transparent border on the triangle form?

enter image description here

As you can see, the form has double transparent border. I would be glad if you give me some link or little edit my code snippet. Its important that border transparent and has opacity somewhere 0.3-0.6

form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
  height: 150px;
}
form .header {
  flex-basis: 100%;
  margin: -10px 0 10px;
  text-align: center;
  color: white;
}
form input,
form button {
  flex-grow: 1;
  height: 30px;
  margin: 0 5px;
  padding: 0 5px;
  box-sizing: border-box;
}
form button[type="submit"] {
  background-color: #FFD900;
}
.rhombus {
  position: relative;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.rhombus:before,
.rhombus:after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: #1E9BAF;
  z-index: -1;
}
.rhombus:before {
  top: 0;
  -webkit-transform: rotateX(30deg);
  -webkit-transform-origin: center bottom;
  -ms-transform: rotateX(30deg);
  -ms-transform-origin: center bottom;
  transform: rotateX(30deg);
  transform-origin: center bottom;
}
.rhombus:after {
  bottom: 0;
  -webkit-transform: rotateX(-30deg);
  -webkit-transform-origin: center top;
  -ms-transform: rotateX(-30deg);
  -ms-transform-origin: center top;
  transform: rotateX(-30deg);
  transform-origin: center top;
}
<form class="rhombus">
  <div class="header">SOME TEXT</div>
  <input name="name" placeholder="Your name"/>
  <input name="phone" placeholder="Your mobile phone"/>
  <button type="submit">SEND</button>
</form>

Solution

  • You can do this easily using CSS like in the below snippet:

    • Add a border of the required width and color to the two pseudo-elements. Nullify the border on the bottom of :before pseudo-element (the one that produces the top half of the shape) and the border on the top of :after pseudo-element (the one that produces the bottom half).
    • Add a padding (exactly the same way as the border) to them and clip the background to be just within the content box alone. This would make the padding area of the element be transparent.

    form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
  height: 150px;
}
form .header {
  flex-basis: 100%;
  margin: -10px 0 10px;
  text-align: center;
  color: white;
}
form input,
form button {
  flex-grow: 1;
  height: 30px;
  margin: 0 5px;
  padding: 0 5px;
  box-sizing: border-box;
}
form button[type="submit"] {
  background-color: #FFD900;
}
.rhombus {
  position: relative;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.rhombus:before,
.rhombus:after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: #1E9BAF;
  background-clip: content-box;
  border: 2px solid rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.rhombus:before {
  top: 0;
  padding: 2px 2px 0px 2px;
  border-width: 2px 2px 0px 2px;
  -webkit-transform: rotateX(30deg);
  -webkit-transform-origin: center bottom;
  -ms-transform: rotateX(30deg);
  -ms-transform-origin: center bottom;
  transform: rotateX(30deg);
  transform-origin: center bottom;
}
.rhombus:after {
  bottom: 0;
  padding: 0px 2px 2px 2px;
  border-width: 0px 2px 2px 2px;
  -webkit-transform: rotateX(-30deg);
  -webkit-transform-origin: center top;
  -ms-transform: rotateX(-30deg);
  -ms-transform-origin: center top;
  transform: rotateX(-30deg);
  transform-origin: center top;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  background: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}
    <form class="rhombus">
  <div class="header">SOME TEXT</div>
  <input name="name" placeholder="Your name" />
  <input name="phone" placeholder="Your mobile phone" />
  <button type="submit">SEND</button>
</form>

    If the inner border is actually not a transparent one (the image in question doesn't have a transparent inner border) then it becomes slightly more complex but it can still be done. We'd need linear gradient background images instead of plain solid colors, clip one layer to be within the content area while the other applies for the padding area also (using background-clip property).

    We are using linear-gradient background-images because applying multiple colors, controlling the sizes are a possibility with gradients unlike solid colors.

    form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
  height: 150px;
}
form .header {
  flex-basis: 100%;
  margin: -10px 0 10px;
  text-align: center;
  color: white;
}
form input,
form button {
  flex-grow: 1;
  height: 30px;
  margin: 0 5px;
  padding: 0 5px;
  box-sizing: border-box;
}
form button[type="submit"] {
  background-color: #FFD900;
}
.rhombus {
  position: relative;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.rhombus:before,
.rhombus:after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  background: linear-gradient(#1E9BAF, #1E9BAF), linear-gradient(white, white);
  background-clip: content-box, padding-box;
  border: 2px solid rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.rhombus:before {
  top: 0;
  padding: 2px 2px 0px 2px;
  border-width: 2px 2px 0px 2px;
  -webkit-transform: rotateX(30deg);
  -webkit-transform-origin: center bottom;
  -ms-transform: rotateX(30deg);
  -ms-transform-origin: center bottom;
  transform: rotateX(30deg);
  transform-origin: center bottom;
}
.rhombus:after {
  bottom: 0;
  padding: 0px 2px 2px 2px;
  border-width: 0px 2px 2px 2px;
  -webkit-transform: rotateX(-30deg);
  -webkit-transform-origin: center top;
  -ms-transform: rotateX(-30deg);
  -ms-transform-origin: center top;
  transform: rotateX(-30deg);
  transform-origin: center top;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  background: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}
    <form class="rhombus">
  <div class="header">SOME TEXT</div>
  <input name="name" placeholder="Your name" />
  <input name="phone" placeholder="Your mobile phone" />
  <button type="submit">SEND</button>
</form>