Creating a triangle div with CSS

Question

I have recently learned how to create the appearance of a triangle div with CSS and HTML. Now, I would like to know if it is at all possible to add a border around any of the sides of the triangle div, so that if I gave the div a white background and a black border you could still see it? Is there a way I can do this?

JSFIDDLE: http://jsfiddle.net/c75KM/1/

HTML:

<div class="arrow-up"></div>

CSS:

.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}

See this SO answer: http://stackoverflow.com/a/9489667/703717 — Danield, Feb 26 '13 at 07:33

score 6 · Accepted Answer · answered Feb 26 '13 at 06:51

6

This is the typical way to do it:

JSFiddle

.arrow-up:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    margin-top:1px;
    margin-left:2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

.arrow-up:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid black;
}

answered Feb 26 '13 at 06:51

Daniel Imms

47,944
19
150
166

`content` is to make the pseudo-elements `:before` and `:after` visible. In the above I'm sort of using two 'fake' elements which are related to `.arrow-up`, we could do it with two separate elements but it wouldn't be as nice. Read up further here http://css-tricks.com/pseudo-element-roundup/ – Daniel Imms Feb 26 '13 at 06:57

score 0 · Answer 2 · edited Jul 16 '22 at 08:52

0

You can do it using the CSS clip-path property:

div { 
   -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);   
   background: blue;   
   width: 100px;   
   height:100px;                                                      
}

<div></div>

edited Jul 16 '22 at 08:52

jackdbd

4,583
3
26
36

answered Jul 11 '22 at 11:49

F A

1
1

Creating a triangle div with CSS

2 Answers2

Linked

Related