How to shape border spikes in CSS

Question

I need to make the spikes with border like in the picture. Unfortunately I don't have the design, so no png or svg available. How can I make this in CSS? Is it even possible? I've been trying to make it all day, but the best I could come up with was a tutorial on how to make rounded zig zags in css and that's not even close to what I need.

What would be the best way to accomplish this? I just need something to get me in the right direction. Thanks.

https://stackoverflow.com/q/24599961/7427111. Once you are able to get the shape, you should use `shadow` to get the border. — Dhaval Jardosh, Jan 22 '18 at 19:28
@DhavalJardosh what do you mean by shadow? How is it gonna help me get the border? Thanks for the reference — Limpuls, Jan 22 '18 at 19:41
https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css Check this out. I will try to recreate it in few hours when I get the time. — Dhaval Jardosh, Jan 22 '18 at 20:10
I will check it. Thanks I would really appreciate to see yours take on this one. — Limpuls, Jan 22 '18 at 20:19

score 0 · Answer 1 · answered Jan 22 '18 at 19:40

you should be able to re-create this using the Canvas Tag. It's not using CSS purely, instead using a bit of js. Hope that helps.

<!DOCTYPE html>
<html>

  <body>

    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.moveTo(0, 100);
      ctx.lineTo(200, 100);
      ctx.lineTo(250, 50);
      ctx.lineTo(350, 150);
      ctx.lineTo(400, 100);
      ctx.lineTo(500, 100);
      ctx.stroke();

    </script>

  </body>

</html>

After a bit of research, found out you can insert js. in wordPress. — adnan tariq, Jan 22 '18 at 19:48

score 0 · Answer 2 · answered Jan 22 '18 at 20:33

Try using drop-shadow (Dudley's Link for Drop-Shadow)

filter: drop-shadow(0px -10px 0px rgba(0, 0, 255, 1));

.outer {
  background-color: #DF290D;
  width: 300px;
}

.outer img {
  width: 100%;
  filter: drop-shadow(0px -10px 0px rgba(0, 0, 255, 1));
}

<div class="outer">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Mountain_icon_%28Noun_Project%29.svg/2000px-Mountain_icon_%28Noun_Project%29.svg.png" />
</div>

Instead of creating a spike using CSS, better to create an image in draw.io or something and give it drop-shadow, it will save much of your time.

score 0 · Answer 3 · answered Jan 23 '18 at 10:13

You can achieve your desired effect using plain CSS and HTML with the :before and :after pseudo-elements.

I've made a start on the design so far and will look to complete but you can see how to make a start. A lot of this will be trial and error but hopefully it can work to your desired output.

body {
  background: lightgrey;
  padding: 0;
  margin: 0;
}

#title {
  width: 100%;
  padding: 15px;
  margin: 0;
  height: 50px;
  background: white;
  border-bottom: 2px solid red;
}

#title .left {
  float: left;
  height: 50px;
  line-height: 70px
  font-size: 30px;
  vertical-align: bottom;
  position: relative;
}
#title .left:after {
    content: '';
    border: 2px solid red;
    border-width: 2px 2px 0 0;
    transform: skew(-14deg) rotate(-44deg);
    width: 14px;
    height: 38px;
    display: block;
    position: absolute;
    bottom: -44px;
    right: -15px;
    background: lightgrey;
}

#title .right {
  float: left;
  margin-left: 50px;
  font-size: 20px;
  vertical-align: bottom;
}

<div id="title">
  <div class="left">Sole</div>
  <div class="right">Source</div>
</div>

How to shape border spikes in CSS

3 Answers3