Draw Triangle in Corner of Div

Draw triangle in corner of div

You can use position: absolute on triangle element and set top and right properties to 0.

.container {  position: absolute;  top: 5%;  left: 5%;  width: 60%;  height: 30%;  background: black;  color: white;  border-radius: 12px;  overflow: hidden;}
.triangle {  width: 0;  height: 0;  border-style: solid;  border-width: 0 30px 30px 0;  border-color: transparent #608A32 transparent transparent;  right: 0;  top: 0;  position: absolute;}

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

Create a triangle on both top corners of Div, divided by borders

What about an easy way with less of code and linear-gradient:

.element {  width:300px;  height:100px;  background:   linear-gradient(to bottom left,  red 50%,transparent 50%) 100% 0/50px 50px,   linear-gradient(to bottom right, green 50%,transparent 50%) 0 0/50px 50px,      linear-gradient(to bottom right, brown 50%,transparent 50%) 0 0/60px 60px,   linear-gradient(to bottom left,  pink 50%,transparent 50%) 100% 0/60px 60px,  orange;  background-repeat:no-repeat;  text-align:center;  color:#fff;  font-size:40px;}

<div class="element"> A </div>

How to create triangle shape in the top-right angle of another div to look divided by border

I'd suggest, given the following mark-up:

#box {    width: 10em;    height: 6em;    border: 4px solid #ccc;    background-color: #fff;    position: relative;}
#box::before,#box::after {    content: '';    position: absolute;    top: 0;    right: 0;    border-color: transparent;    border-style: solid;}
#box::before {    border-width: 1.5em;    border-right-color: #ccc;    border-top-color: #ccc;}
#box::after {    border-radius: 0.4em;    border-width: 1.35em;    border-right-color: #0c0;    border-top-color: #0c0;}

<div id="box"></div>

how do I add a triangle to the top right corner?

Absolute positioned elements are positioned relative to the closest parent with the position property different from static, which is default.

Just changed this

.column .option {
  position: relative;
}

.column{
  float:left;
  margin:0 10px 0 0;
  width:120px;
}

.column .option{
  position: relative;
  margin:10px 0 0 0;
  padding:10px;
  background:#22244a;
}

.column .option:first-child{
  background:#EBEDEE;
}

.column .option:after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 0; 
   height: 0; 
   display: block;
   border-left: 35px solid transparent;
   border-bottom: 35px solid transparent;
   border-top: 35px solid #0094bb;
   z-index:0;
}

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

Triangle with one rounded corner

I know this is a little hacky, but I don't think there is an easy way to do this with a single class.

All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

.arrow-left {  position: absolute;  width: 100px;  height: 100px;  left: 20px;  background: black;  -webkit-transform: rotate(45deg);  transform: rotate(45deg);  border-radius: 10px;}
.cover {  position: absolute;  height: 100px;  width: 40px;  overflow: hidden;}

<div class="cover">  <div class="arrow-left"></div></div>

How to make a triangle shape in the bottom of the div

I'd go with clip-path to achieve something like this.

.clipped {  clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);}
img {  max-width: 100%;  width: 100%;}

<div class="clipped">  <img src="https://loremflickr.com/1280/720"></div>

How to draw a triangle with one rounded corner programatically with SVG?

There are several ways to do it, depending on what sort of curve you want. The simplest way is probably to use Q/q as you were attempting.

Calculate the endpoints, leading into and out of the curve, by calculating a position along that line segment. For instance in the second SVG I have chosen a point 80% along the first line (20,120 -> 70,20).

x = x0 + 80% * (x1 - x0)
  = 20 + 80% * (70 - 20)
  = 60

y = y0 + 80% * (y1 - y0)
  = 120 + 80% * (20 - 120)
  = 120 + -80
  = 40

and the same for the line exiting the curved corner. Except, of course this time it will only be 20% aaway from the corner.

Once you have those two points, just use the original corner point as the control point (first coordinate pair) in the Q command.

So the original corner

M 20,120
L 70,20
L 120,120

becomes

M 20 120
L 60 40
Q 70 20 80 40
L 120 120

As shown in the third SVG below.

<p>Triangle</p><svg height="200" width="200" style="margin: 20px">  <path d="M 20 120           L 70 20           L 120 120               Z"         fill="LightBlue"         stroke="Blue"         stroke-width="10" /> </svg>
<svg height="200" width="200" style="margin: 20px">  <path d="M 20 120           L 60 40           L 80 40           L 120 120               Z"         fill="LightBlue"         stroke="Blue"         stroke-width="10" /> </svg>
<svg height="200" width="200" style="margin: 20px">  <path d="M 20 120           L 60 40           Q 70 20 80 40           L 120 120               Z"         fill="LightBlue"         stroke="Blue"         stroke-width="10" /> </svg>

How do CSS triangles work?

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

When you have no top border, it looks like this:

Then you give it a width of 0...

...and a height of 0...

...and finally, you make the two side borders transparent:

That results in a triangle.

---

Related Topics