| <html> | |
| <body> | |
| <div class="triangle-wrap shake"> | |
| <div class='triangle'></div> | |
| </div> | |
| </body> | |
| </html> |
This is a basic triangle with rounded corners in pure CSS code - ON STEROIDS. It also has animation. Nothing else to it. It has some filters to make it look clean and crisp and to avoid pixelation artifacts in certain browsers. | Enjoy and share | Sander Nizni | HyperAbsolute
A Pen by Sander Nizni on CodePen.
| /* | |
| SANDER SAYS: | |
| NO WARRANTIES EXPRESSED OR IMPLIED | |
| FOR USING THIS CODE. ALL THIS HAS | |
| HAPPENED BEFORE, AND IT WILL HAPPEN | |
| AGAIN... BUT IT DOESN'T MATTER... | |
| BECAUSE WE ARE IN THIS TOGETHER. | |
| C'EST LA VIE. EVERYTHING COULD | |
| HAVE BEEN ANYTHING ELSE, AND IT | |
| WOULD HAVE JUST AS MUCH MEANING. | |
| ENJOY. COMPLIMENTS? PARTY | |
| INVITATIONS? RIGHT ON! CONTACT | |
| @HYPERABSOLUTE ON TWITTER OR ON | |
| UXRIG.COM | |
| STAY AWESOME | HYPERABSOLUTE | |
| */ |
| .triangle { | |
| position: relative; | |
| background-color: white; | |
| opacity: 0.5; | |
| text-align: left; | |
| } | |
| .triangle:before, | |
| .triangle:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: inherit; | |
| } | |
| .triangle, | |
| .triangle:before, | |
| .triangle:after { | |
| width: 7em; | |
| height: 7em; | |
| border-top-right-radius: 30%; | |
| } | |
| .triangle { | |
| transform: rotate(-90deg) skewX(-30deg) scale(1,.866); | |
| } | |
| .triangle:before { | |
| transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); | |
| } | |
| .triangle:after { | |
| transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); | |
| } | |
| .triangle{ | |
| filter: drop-shadow(4px 7px 10px rgb(0,0,0)); | |
| -webkit-filter: drop-shadow(4px 7px 10px rgb(0,0,0)); | |
| } | |
| @keyframes spaceboots { | |
| 0% { transform: translate(2px, 1px) rotate(0deg); } | |
| 10% { transform: translate(-1px, -2px) rotate(-1deg); } | |
| 20% { transform: translate(-3px, 0px) rotate(1deg); } | |
| 30% { transform: translate(0px, 2px) rotate(0deg); } | |
| 40% { transform: translate(1px, -1px) rotate(1deg); } | |
| 50% { transform: translate(-1px, 2px) rotate(-1deg); } | |
| 60% { transform: translate(-3px, 1px) rotate(0deg); } | |
| 70% { transform: translate(2px, 1px) rotate(-1deg); } | |
| 80% { transform: translate(-1px, -1px) rotate(1deg); } | |
| 90% { transform: translate(2px, 2px) rotate(0deg); } | |
| 100% { transform: translate(1px, -2px) rotate(-1deg); } | |
| } | |
| .shake:hover, | |
| .shake:focus { | |
| animation-name: spaceboots; | |
| animation-duration: 0.05s; | |
| transform-origin:50% 50%; | |
| animation-iteration-count: infinite; | |
| animation-timing-function: linear; | |
| } | |
| /* extra styles / not required for the control */ | |
| .triangle-wrap { | |
| position: absolute; | |
| right: 50%; | |
| } | |
| html{ | |
| background-color: #666; | |
| } | |
| body { | |
| padding: 5%; | |
| background-color: #666; | |
| } |