Responsive CSS triangle with percents width

by

You could use a skewed and rotated pseudo element to create a responsive triangle under the link :

DEMO (resize the result window to see how it reacts)

The triangle maintains it’s aspect ratio with the padding-bottom property.

If you want the shape to adapt it’s size according to it’s content, you can remove the width on the .btn class

.btn {
  position: relative;
  display: inline-block;
  height: 50px; width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}
.btn:after {
  content: "";
  position: absolute;
  top:50px;  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/

body {
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size: cover;
}
<a href="#" class="btn">Hello!</a>

For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)

More Related Contents:

  1. How do CSS triangles work?
  2. background image, linear gradient jagged edged result needs to be smooth edged
  3. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  4. Make table cells square
  5. Transparent arrow/triangle indented over an image
  6. Border-radius in percentage (%) and pixels (px) or em
  7. How can I show only corner borders?
  8. Responsive grid of hexagons
  9. Why does the order of media queries matter in CSS?
  10. Wavy shape with css
  11. Invert rounded corner in CSS?
  12. How to skew element but keep text normal (unskewed)
  13. Common breakpoints for media queries on a responsive site
  14. How to add border in my clip-path: polygon(); CSS style
  15. Inset border-radius with CSS3
  16. Common CSS Media Queries Break Points [duplicate]
  17. css skew element and get inner rounded border top
  18. Swap DIV position with CSS only
  19. Triangle shape with background image
  20. How to create multi-color border with CSS?
  21. Easier way to create circle div than using an image?
  22. Slanted Corner on CSS box
  23. CSS Transform Skew [duplicate]
  24. Responsive Images with CSS
  25. Which are the most important media queries to use in creating mobile responsive design?
  26. Clip path inset circle?
  27. Set div height equal to screen size
  28. How can I avoid media query overlap?
  29. Rounded side, not rounded corners
  30. Making jagged triangle border in CSS

Leave a Comment