2

I'm trying to make some kind of "triangular ornament" bar with html/css. Can you please tell me how to make such?

Here is the image :

enter image description here

Thanks in advance

Harry
  • 87,580
  • 25
  • 202
  • 214
gogachinchaladze
  • 1,064
  • 1
  • 8
  • 19
  • 1
    See - http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work – Paulie_D Sep 11 '14 at 10:21
  • 1
    Please show us the code that you have tried so far. This shape is pretty simple to achieve. – Harry Sep 11 '14 at 10:23
  • 1
    several requirements to get an answer : 1) have you checked this? http://stackoverflow.com/questions/17711689/css3-triangle-cut-out-border and many other about this issue. 2) do you have a plain background? 3) what is your code and have tried anything? – web-tiki Sep 11 '14 at 10:23

3 Answers3

1

If you want to do it using one element then have a look at Pseudo-elements - CSS | MDN

enter image description here

HTML:

   <figure></figure>

DEMO 1 using Background-image

figure{
    width:320px;
    height:64px;
    background:blue; 
    position:relative;
    margin:40px auto;
}

figure:before{
    content: '';
    position: absolute;
    left: -60px;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}

DEMO 2 using 2 elements

CSS:

figure{
    width:320px;
    height:64px;
    background:blue; 
    position:relative;
    margin:40px auto;
}

figure:before, figure:after{
    content:'';
    position:absolute;
    display:block;
    left: -40px;
    width:0;
    height:0;
    border-left: 40px solid transparent;
    border-right: 0px solid transparent;
}

figure:before{
    top: 0;
    border-top: 32px solid blue;
}

figure:after{
    bottom: 0;
    border-bottom: 32px solid blue;

}
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • 2
    Not saying this is wrong, but just one pseudo-element should be enough for this shape (just to reduce a few lines of code :)). – Harry Sep 11 '14 at 10:26
  • Not it is not did the OP said he has a white background? because with 2 you can set the body background as you want, give it a try SIR and please let me know. – Gildas.Tambo Sep 11 '14 at 10:28
  • Hmm, fair point as long as it is not a solid color background (say an image). If it is a solid color then it can be directly used in the border color. – Harry Sep 11 '14 at 10:34
  • Anyhow the OP has choosen i made an update with background-image i hope this will help you all – Gildas.Tambo Sep 11 '14 at 10:48
1

I have made this by mixing two triangles and a rectangle see if this is what you want http://jsfiddle.net/xkwbt73v/5/ HTML

<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>

CSS

#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}

#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;

}

#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}
Akshay
  • 14,138
  • 5
  • 46
  • 70
0

http://jsfiddle.net/5p4yLrz4/ :)

HTML:

<div class="wrapper">
    <div class="triangle"></div>
</div>

CSS:

.wrapper{
    width:300px;
    background-color:orange;
}
.triangle {
   width:0;
   border-width: 30px;
   border-right:0px;
   border-color: transparent transparent transparent yellow;
   border-style: solid;   
}
Benjamin Rasmussen
  • 68
  • 8