Draw triangle in corner of div

by

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>

You can also just use pseudo-element with absolute position for triangle.

.container {
  position: relative;
  width: 300px;
  height: 70px;
  background: black;
  border-radius: 12px;
  overflow: hidden;
}

.container:after {
  content: '';
  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>

Below is another example with triangles in all corners. 

.all_triangles_container {
  position: relative;
  width: 300px;
  height: 70px;
  background: black;
  overflow: hidden;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}

.triangle_tl {
  border-width: 0 0 30px 30px;
  border-color: transparent transparent transparent green;
  left: 0;
  top: 0;
}

.triangle_tr {
  border-width: 0 30px 30px 0;
  border-color: transparent red transparent transparent;
  right: 0;
  top: 0;
}

.triangle_br {
  border-width: 30px 30px 0 0;
  border-color: transparent yellow transparent transparent;
  right: 0;
  bottom: 0;
}

.triangle_bl {
  border-width: 0 30px 30px 0px;
  border-color: transparent transparent purple transparent;
  left: 0;
  bottom: 0;
}
<div class="all_triangles_container">
  <div class="triangle triangle_tl"></div>
  <div class="triangle triangle_tr"></div>
  <div class="triangle triangle_br"></div>
  <div class="triangle triangle_bl"></div>
</div>

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  3. CSS – How to Style a Selected Radio Buttons Label?
  4. Table with fixed header and fixed column on pure css
  5. Why can’t I center with margin: 0 auto?
  6. Apply CSS styles to an element depending on its child elements [duplicate]
  7. 3 column layout HTML/CSS
  8. HTML5 / CSS3 Circle with Partial Border
  9. Why display grid with 100% in grid-template-columns goes out of body?
  10. Can I use non existing CSS classes?
  11. How to resize an image to fit in the browser window?
  12. Why are dashes preferred for CSS selectors / HTML attributes?
  13. Style not working for innerHTML in Angular [duplicate]
  14. How to Set Height for the Drop Down of Select box
  15. Is it possible to always show up/down arrows for input “number”?
  16. How to center-align one flex item and right-align another using Flexbox [duplicate]
  17. When I try to shift the image upwards using negative margin the whole container is moved upwards
  18. What is the browser-default background color when selecting text?
  19. How to center image horizontally within a div element?
  20. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  21. What’s the difference between HTML’s and CSS’s width attribute?
  22. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  23. How do I make flex box work in safari?
  24. Zebra striping a flexbox table with wrapping items
  25. Removing unwanted table cell borders with CSS
  26. Bootstrap row and col explanation
  27. How to make one span both columns in a two column table?
  28. What is the difference between phrasing content and flow content?
  29. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  30. Dashed border not showing in firefox [duplicate]

Leave a Comment