How to create an asymmetric triangle at the bottom left corner of a box?

css triangle generator
css transparent triangle with border
css triangle background
css triangle after
css triangle after div
css line arrow
css triangle generator with border
css triangle before

I need to create a box with an arrow at the left bottom corner. My problem is to get the asymmetric triangle.

Here an example for the bottom border of the box with an triangle at the left bottom corner:

This is my attempt so far:

.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
}
<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

I edited the border width a bit, and added transform: skewX(). You may play with the right amount for the skew. In addition the :after changed to :before and I played with left property and removed the right. hope it helps:

.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 8px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: skewX(20deg);
}
<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

CSS Triangle, I need to create a box with an arrow at the left bottom corner. My problem is to get the asymmetric triangle. Here an example for the bottom border of the box with� Pull the fabric apart at 1 of the corners to form a triangle. Identify where you want to add a box corner. Then, grasp the fabric on both sides of the corner. Pull the fabric apart to open up the fabric in this corner, as if you are making a teepee with the fabric. This will form a triangle with the seam going down the center.

Write below code to generate arrow

.box {
position: relative;
background: #00aabb;
border-radius: .4em;
}

.box:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-right: 0;
margin-left: -10px;
margin-bottom: -20px;
}

CSS triangle generator, CSS The idea is a box with zero width and height. up arrow, for example, the bottom border is colored while the left and right are transparent,� Draw a 13-inch line, connecting your two tick marks together. Finish the triangle by drawing a line from the bottom left corner to the top of the 13-inch line. All sides should be 13 inches. Cut

Here is an idea using multiple background and relying on conic-gradient() 1

.box {
  width: 150px;
  height: 75px;
  background: 
    conic-gradient(transparent 314deg, black 315deg,black 340deg,transparent 342deg)
    bottom -30px left 0/60px 60px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}
<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Pure CSS outlined triangle using only borders - DEV, Direction. Top; Right; Bottom; Left. Top right; Bottom right; Bottom left; Top left. Type. IE6 support (add chroma filter). Equilateral; Isosceles; Scalene. Size. Width This adds a pseudo element at the bottom of the block, changes its point of rotation to the bottom right corner, and rotates it -1.5 degrees, simulating the effect of an angled edge. To implement another angled edge on the top of the element, it’s as easy as adding another pseudo element with :before, changing its point of rotation to the top

You could use an SVG as the background of the pseudoelement, e.g.

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -30px;
  width: 22px;
  height: 30px;
  color: #000;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 22 30" 
                   xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink" >
                   <path d="M0 0 L22 30 L15 0 z" fill="%23000" /></svg>');
} 

Example Codepen

Triangles: A Short Study in Continuation Patterns, Create the box with transparent borders on the side to create the angle left & top border, rotate it and skew so it can fit exactly with the bottom� Fold the bottom corners of the triangle up towards the top point. Take the left bottom corner, and fold it towards the top of the triangle. Make sure that the edges align, then run your fingernail along the crease to sharpen it. Repeat this step for the other side. You will end up with a diamond shape.

I have updated css with transform:rotate and border, check it

.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 15px solid transparent;
  border-left: 0px solid black;
  border-bottom: none;
  transform: rotate(20deg);
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: rotate(-20deg);
}
<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Triangle Definition, Think of the lower line of the triangle, or lower trendline, as the The supply line is the top line of the triangle and represents the overbought side of the These patterns, the symmetrical triangles as well as those on the An ascending triangle is a chart pattern used in technical analysis created by a� List of Triangle symbols with html entity, unicode number code. Learn how to make over 43 Triangle symbols of math, copy and paste text character.

Volume with cross sections: triangle (video), A triangle is a continuation pattern used in technical analysis that looks pattern, namely ascending, descending, and symmetrical triangles. ultimately meet at the apex on the right side, forming a corner. lower trendline completes the other two corners to create the triangle. The Rectangle Formation. I want to create shape like on this picture: I created triangle shape like on this pic, and set the margins to be in top right angle, but I don't know how to make it look divided from the left div

How to find area of triangle (formula walkthrough) (video), Practice: Volumes with cross sections: triangles and semicircles find this confusing, get an Duration: 8:34 Posted: Oct 17, 2015 To be a little more informative, it has to do with the position:absolute and top:100% properties on .sidebar-resources-categories::after. An absolutely positioned element is placed according to the nearest parent that has position:relative, or the highest parent in the DOM (body).

That means you would square the hypotenuse (the side not connected to a right angle Duration: 1:31 Posted: May 30, 2017 Creates a rectangle filled with color in the given image starting at point 1 and ending at point 2. 0, 0 is the top left corner of the image.

Comments
  • Can you seperate the html and the javascript so we can run the code
  • Change the dupe to .comment:before { background-color: skyblue; bottom: -20px; left: 40px; } to point the other way
  • If you want it to the left why do you set right:30px and not left:0 ? :)
  • @MihaiT Sorry, this was a copy error...
  • To get an asymmetric triangle as requested, I would suggest setting margin-left to 5px and to use a CSS transform such as transform: skew(30deg). Live example on JSFiddle
  • Yes, you can do with the transform also.
  • Looks perfect. Exactly what I need, but unfortunately there is only chrome supported, which is not an option for me...
  • @user3142695 yes we still need to wait a bit but it's coming ;) it will soon be supported everywhere. I have also added another idea with simple gradient but without transparency