css - Border-image gradient pattern in triangle shape -
i want create odd shaped triangle css. first thought use transparent borders transform: rotate , worked (see left triangle). want use gradient border image pattern background same triangle can't make work. tried many things changing border-width, using wrappers , overflow:hidden among others, nothing worked. here post 1 of tries (see right shape) see pattern takes space, not following triangle shape. ideas?
#top-left { position:absolute; left:78px; width: 0; height: 0; border-top: 100px solid transparent; border-right: 80px solid black; border-bottom: 50px solid transparent; -webkit-transform: rotate(-20deg); } #top-right { position:absolute; left:300px; width: 0; height: 0; border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10; border-image-width: 100px 80px 50px 0px; border-width: 100px 80px 50px 0px; border-style: solid; -webkit-transform: rotate(-20deg); }<div id="wrapper"> <div id="top-left"></div> <div id="top-right"></div> </div>edit: andrey fedorov's answer good, there problem when background not solid color, example:
body{ background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; } #wrapper { position: relative; } #top-left { position:absolute; left:0px; width: 0; height: 0; border-top: 100px solid #fff; border-right: 80px solid transparent; border-bottom: 50px solid #fff; -webkit-transform: rotate(-20deg); } #top-right { position:absolute; z-index: -10; left:0; width: 0; height: 0; border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10; border-image-width: 100px 80px 50px 0px; border-width: 100px 80px 50px 0px; border-style: solid; -webkit-transform: rotate(-20deg); }<div id="wrapper"> <div id="top-left"></div> <div id="top-right"></div> </div>
you still can use linear-gradient no-repeat , background-size draw each pieces :
examples steps single tag :
/* testing gradients */ p , div#wrapper { width:80px; float:left; margin:1em; height:150px; /* see me remove shadow */ box-shadow:0 0 0 2px; } p { background: linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ; background-size: 100% 15px; transform: rotate(-20deg); } p + p{ background: linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat; background-size: 100% 15px, 100% 65%; } p + p + p { background: linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat, linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom; background-size: 100% 15px, 100% 65%, 100% 8px; } p+ p + p + p { background: linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat, linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom, linear-gradient(33deg, transparent 42px, purple 43px) bottom no-repeat; background-size: 100% 15px, 100% 65%, 100% 8px, 100% 35.5%; } p:last-of-type{ box-shadow:0 0 } /* original css/issue */ body{ background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; } #wrapper { position: relative; } #top-left { position:absolute; left:0px; width: 0; height: 0; border-top: 100px solid #fff; border-right: 80px solid transparent; border-bottom: 50px solid #fff; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } #top-right { position:absolute; z-index: -10; left:0; width: 0; height: 0; border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10; border-image-width: 100px 80px 50px 0px; border-width: 100px 80px 50px 0px; border-style: solid; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }<!-- issue --> <div id="wrapper"> <div id="top-left"></div> <div id="top-right"></div> </div> <!-- p testing purpose --> <p></p> <p></p> <p></p> <p></p> <p></p>inbricated element + gradient & transform too:
body{ background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; } div.inbricate { margin:1em; height:150px; width:80px; position:relative; overflow:hidden; transform:rotate(-20deg); box-shadow: 0 0 ; } .inbricate div { transform:rotate(31deg) scale(1.2, 0.9) skew(-5deg); transform-origin: 100% 102%; height:100%; background:linear-gradient(-40deg, pink 8%, purple 8%, purple 65%, pink 65%, pink 75%, purple 75% ) }<div class=inbricate> <div> </div> </div>
Comments
Post a Comment