त्रिकोणों की नकल करने के लिए 0-चौड़ाई / 0-ऊंचाई वाले तत्व पर पारदर्शी सीमाओं का उपयोग करते हुए काफी लोकप्रिय सीएसएस हैक है। सीएसएस-ट्रिक्स पर यहाँ एक सीएसएस स्निपेट है जो इसे चित्रित करता है।
अगर, मेरी तरह, आप कभी नहीं याद करते हैं कि यह कैसे काम करता है, तो सुनिश्चित करें कि हम हमारी मदद करने के लिए सैस का उपयोग कर सकते हैं।
/// Triangle helper mixin /// @param (Direction) $direction - Triangle direction, either `top`, `right`, `bottom` or `left` /// @param (Color) $color (currentcolor) - Triangle color /// @param (Length) $size (1em) - Triangle size @mixin triangle($direction, $color: currentcolor, $size: 1em) ( @if not index(top right bottom left, $direction) ( @error "Direction must be either `top`, `right`, `bottom` or `left`."; ) width: 0; height: 0; content: ''; z-index: 2; border-#(opposite-position($direction)): ($size * 1.5) solid $color; $perpendicular-borders: $size solid transparent; @if $direction == top or $direction == bottom ( border-left: $perpendicular-borders; border-right: $perpendicular-borders; ) @else if $direction == right or $direction == left ( border-bottom: $perpendicular-borders; border-top: $perpendicular-borders; ) )अतिरिक्त टिप्पणी:
* opposite-positionसमारोह कम्पास से आता है; यदि आप कम्पास का उपयोग नहीं करते हैं, तो आपको अपना खुद का होना चाहिए;
* मिक्सचर त्रिकोण की स्थिति के साथ सौदा नहीं करता है; हालांकि यह एक स्थिति मिश्रण के साथ गठबंधन करने के लिए पूरी तरह से ठीक है;
* यह contentनिर्देश छद्म तत्वों पर प्रयोग करने की अनुमति देने के लिए है, जो वास्तव में अधिकांश मामलों में समाप्त हो जाता है।
प्रयोग
.foo::before ( @include triangle(bottom); position: absolute; left: 50%; bottom: 100%; ).foo::before ( width: 0; height: 0; content: ''; z-index: 2; border-top: 1.5em solid currentColor; border-left: 1em solid transparent; border-right: 1em solid transparent; position: absolute; left: 50%; bottom: 100%; )