How to Draw Triangle with Transparent Background with Border

How to draw triangle with transparent background with border?

Demo

 .triangle {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red;
     position:relative;
 }
 .triangle:after{
     content:'';
     position:absolute;
     top:5px;
     left:-45px;
     width: 0;
     height: 0;
     border-left: 45px solid transparent;
     border-right: 45px solid transparent;
     border-bottom: 92px solid white;
}

How to create a transparent triangle with border using CSS?

I've found a webkit-only solution, using the ▲ character:

.triangle {  -webkit-text-stroke: 12px black;  color: transparent;  font-size: 200px;}

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

How do i create transparent triangle with thin gray borders css

did you mean something like this?
You can change the color of the border with: border-top-color: #B1B1B1;
Once you would like change the dimensions of the triangle, you have to change it everywhere.

.arrow-down {  position: relative;}.arrow-down:after,.arrow-down:before {  border-top: 20px solid white;  border-left: 20px solid transparent;  border-right: 20px solid transparent;  margin-left: -20px;  position: absolute;  bottom: -20px;  content: '';  left: 50%;}.arrow-down:before {  border-right: 20px solid transparent;  border-top: 20px solid;  border-left: 20px solid transparent;  border-top-color: #B1B1B1;  bottom: -22px;  margin-left: -20px;}

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

transparent triangle with border

You can also use gradients and/or transform:

• on left: square + border-top/left + transform + gradient to draw the bottom border:
• on middle : yours
• on right : border-bottom + gradient for the triangle top borders

both extra example can hold content such as font icone / text / image .

body {  background:tomato;}
#rotate {  position:fixed;  border:solid turquoise;  border-bottom:none;  border-right:none;  bottom:7px;  left:calc(50% - 180px);  height:75px;  width:75px;  transform-origin: bottom left;  transform:rotate(45deg);  background:linear-gradient(to bottom right, transparent calc(50% - 3px), turquoise calc(50% - 3px), turquoise 50%, transparent 50% ); }
#bg-gradient {  position:fixed;  bottom:5px;  left: calc(50% + 70px)  ;  border-bottom:solid turquoise;  background:linear-gradient(to bottom right, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px) ),linear-gradient(to bottom left, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px) ) right    ;  background-repeat:no-repeat;  background-size:50% 100%;  height:55px;  width:110px;  }
#down { display: block; position: fixed; left: 0; right: 0; width: 0; height: 0; margin: 0 auto; border-left: 55px solid transparent; border-right: 55px solid transparent; z-index: 20;  bottom: 5px;  border-bottom: 55px solid rgba(250,250,250,0.75); }

<div id="down"></div><div id="rotate"></div><div id="bg-gradient"></div>

Make a CSS triangle with transparent background on a div with white bg image?

The Fiddle:

http://jsfiddle.net/JaMH9/2/

The HTML:

<div class="bar">
    <span class="home">^<br>Home, sweet home!</span>
</div>​

The CSS:

.bar {
    position: relative;
    width: 90%;
    height: 30px;
    margin: 0 auto;
}

.home {
    position: absolute;
    top: 0px;
    left: 60%;
    width: 20%;
    text-align: center;
}

.bar:before, .bar:after {
    content:'';
    position: absolute;
    top: 0;
    height: 0;
    border-top: 30px solid white;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.bar:before {
    left: 0;
    width: 70%;
    border-right: 30px solid transparent;
}

.bar:after {
    right:0;
    width: 30%;
    border-left: 30px solid transparent;
}
​

Draw special shapes right triangle with border radius in CSS3

you can add border-bottom-right-radius in your #shape css. you just need to set the border-left to white or depending on your background color of your div to match the color

#shape {
    width: 0;
    border-left: 72px solid white;
    border-right: 0px solid transparent;
    border-bottom: 72px solid red;
    border-bottom-right-radius: 20px;
}

<div id="shape"></div>

---

Related Topics