Making Jagged Triangle Border in CSS

Making jagged triangle border in CSS

You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.

.header{
    color: white;
    background-color: #2B3A48;
    text-align: center;
}
.header::after {
    content: " ";
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

<div class="header"><h1>This is a header</h1></div>

How do I make a CSS triangle with smooth edges?

Even in pure CSS we can get the smooth diagonals.

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

Instead of giving transparent you can make use of rgba(255, 255, 255, 0). This again gives transparent. But the alpha=0 makes smooth diagonals.

Check the browser support for rgba css-tricks.com/rgba-browser-support

Thanks

How to make CSS zig-zag borders?

Here is solution. It's called zig-zag border.

http://jsfiddle.net/justinmc/QqnD3/

<div class="container">
    <h1>Content Here</h1>
</div>

.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}

.container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

credits
https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/

Triangle shaped pointer / border on a horizontal line

There are several ways to achieve that and it probably depends on your layout. One solution is to use a rotated element with borders on two sides.

.triangle {
  background: green;
  border: 2px solid white;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg);
}

.box {  background: green;  width: 400px;  height: 80px;  position: relative;}
.line {  height: 39px;  border-bottom: 2px solid white;}
.triangle {  background: green;  border: 2px solid white;  border-width: 2px 2px 0 0;  transform: rotate(-45deg);  position: relative;  left: 300px;  top: 28px;  width: 20px;  height: 20px;}

<div class="box">  <div class="line">    <div class="triangle">      </div>    </div>  </div>

CSS Triangle Grainy and Jagged in Chrome

.cssNip:after, .cssNip:before {
  border-bottom: 50px solid #fff;
  bottom: 0;
  content: "";
  position: absolute;
  width: 50%;
  z-index: 100;
  transform:scale(.99999);
}

This worked fools. Thanks for the help.

Creating a droplet like border effect in css

Creating an effect like this is definitely possible using CSS3 but you would need more than just the border for that.

In the below sample, I have used a pseudo-element with a radial-gradient background to mimick the border effect shown in question. Depending on which side should have the border, you can tweak the positioning of the pseudo element to achieve the effect.

The sample provided in the answer has the effect for the top border. If you want it for bottom border, you can refer to this sample. The same can be achieved for left/right border also but would need a bit more tweaking.

You can also tweak the background-size property to achieve smaller/larger circles in the border. You can also produce an ellipse pattern instead of a circle in the border by using the keyword ellipse instead of circle in the radial-gradient property value.

Points to note:

Caution: I am adding this answer only to illustrate that this effect is possible to create using just CSS3, but wouldn't recommend it for usage just as yet because of the relatively lesser browser support for radial-gradients. You can use this if all your target browsers support it.
If you need this border effect on all sides, then just pseudo-elements would not be enough. You would need extra elements for each side and then position them as required.
The radial-gradient background could also be directly added to the main div if the border is only required on the top. But positioning/achieving this effect for a bottom border wouldn't be possible with it and hence the use of a pseudo-element.
border-image property can be used to achieve the same effect using just borders but that has even lesser browswer support than radial-gradients (even IE 10 doesn't support it) and hence not recommended/used.
The below code was tested in Firefox, Chrome, Opera and Safari and should also work in IE 10+ as radial-gradients are not supported in IE 9 and less.

.bordered{    position: relative;    height: 75px;    width: 100%;    border-top: 40px solid black;    background: #EEE;    padding-top: 10px;}.bordered:before{    position: absolute;    content: '';    top: 0px;    height: 8px;    width: 100%;    background-size: 12px 12px;    background-position: -5px -3px;    background-image: -webkit-radial-gradient(50% 0%, circle, black 50%, transparent 55%);    background-image: -moz-radial-gradient(50% 0%, circle, black 50%, transparent 55%);    background-image: radial-gradient(circle at 50% 0%, black 50%, transparent 55%);}

<div class="bordered">Lorem Ipsum Dolor Sit Amet</div>

CSS border jagged with different sized/color borders

The reason this happens is because it's creating a 'frame' around the box.

Think of a wooden picture frame, you don't use four rectangular pieces of wood to create a frame, you use 4 trapezoidal pieces and put them together. When you set a larger width on one side, its diagonally rendering it inward towards the corner of the box.

The reason it looks bad is because the antialiasing between borders has never been good.

Alternative

You could just do div:before{border-left: 15px solid #000;} if you didn't want the borders cropped like that.

Triangle edges with consistent angle in CSS

Instead of clip-path I would consider mask with gradient to have the same angle . The trick is to use big values that you make fixed and you place the gradients around the center.

body {  background-color: #6e4d3c;  margin: 0;}
header {  -webkit-mask:        linear-gradient(to bottom left ,#fff 49.8%,transparent 50%) bottom 0 right calc(50% + 750px),    linear-gradient(to bottom right,#fff 49.8%,transparent 50%) bottom 0 left  calc(50% + 750px);  -webkit-mask-size:1501px 875px;  -webkit-mask-repeat:no-repeat;  mask:    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%) bottom 0 right calc(50% + 750px),    linear-gradient(to bottom right,#fff 49.8%,transparent 50%) bottom 0 left  calc(50% + 750px);  mask-size:1501px 875px;  mask-repeat:no-repeat;  height: 700px;    /* I use a similar gradient here to create the border effect */  background:     linear-gradient(to bottom left ,transparent calc(50% - 50px),#fff calc(50% - 49px))     bottom 0 right calc(50% + 750px)/1501px 875px,    linear-gradient(to bottom right,transparent calc(50% - 50px),#fff calc(50% - 49px))     bottom 0 left  calc(50% + 750px)/1501px 875px,    url(http://i.pics.rs/70hBA.png) top/cover    #99ffe7;  background-repeat:no-repeat;  display:flex;}
#logo {  width: 340px;  margin:auto;}

<header>    <img id="logo" src="http://i.pics.rs/M7gQb.png" alt="Logo"></header>

Making Jagged Triangle Border in CSS