How to Make a Triangle with Background Pattern in CSS3? [duplicate]

问题

This question already has answers here:

How do CSS triangles work? (18 answers)

CSS triangle with background image [duplicate] (3 answers)

Closed 5 years ago.

I am trying to make the following with CSS

Making a triangle with CSS is straightforward but I don't know how to give it a non-solid background.

Any suggestions?

edit: The background pattern is a PNG image.

回答1:

.triangle {
   width: 160px;
   height: 160px;
   position: absolute;
   top: 30%;
   left: 45%;
   clip: rect(auto, 180px, auto, 100px);
   transform: rotate(-90deg);
 }

 .triangle::after {
   content: "";
   position: absolute;
   top: 10px;
   bottom: 10px;
   left: 10px;
   right: 10px;
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1)));
   transform: rotate(-45deg);
 }

Example with gradient

If you want to use png image for your background then you should change this property to :

background:url('my_url_to_the_image');

Example with PNG

来源：https://stackoverflow.com/questions/23246323/how-to-make-a-triangle-with-background-pattern-in-css3