CSS උපක්‍රම වල විවිධ CSS හැඩයන් ඕනෑ තරම් තිබේ - CSS වල හැඩයන් සහ මම විශේෂයෙන් ත්‍රිකෝණයකින් ව්‍යාකූල වී සිටිමි:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

එය ක්‍රියාත්මක වන්නේ කෙසේද සහ ඇයි?

CSS ත්රිකෝණ: ක්රියාවන් පහක ඛේදවාචකයක්

ලෙස alex පවසයි , උපාධි 45 ක් සමාන පළල බට් එකිනෙකාට එරෙහිව දක්වා දේශසීමා බැකට්:

ඔබට ඉහළ මායිමක් නොමැති විට, එය මේ ආකාරයට පෙනේ:

එවිට ඔබ එයට පළල 0 ක් දෙන්න ...

... සහ උස 0 ...

... අවසාන වශයෙන්, ඔබ දෙපස මායිම් විනිවිද පෙනෙන බවට පත් කරයි:

එහි ප්‍රති results ලය ත්‍රිකෝණයකි.

මායිම් එකිනෙකට සම්බන්ධ වන කෝණික දාරයක් භාවිතා කරයි (සමාන පළල මායිම් සහිත 45 ° කෝණය, නමුත් මායිම් පළල වෙනස් කිරීමෙන් කෝණය මඟ හැරිය හැක).

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

JsFiddle දෙස බලන්න .

සමහර මායිම් සැඟවීමෙන් ඔබට ත්‍රිකෝණ ආචරණය ලබා ගත හැකිය (විවිධ කොටස් විවිධ වර්ණවලින් ඔබට ඉහත දැකිය හැකිය). transparentත්රිකෝණාකාර හැඩය ලබා ගැනීම සඳහා බොහෝ විට දාරයේ වර්ණයක් ලෙස භාවිතා කරයි.

මූලික චතුරස්රයකින් සහ මායිම් වලින් ආරම්භ කරන්න. සෑම දේශ සීමාවකටම වෙනස් වර්ණයක් ලබා දෙනු ඇත, එවිට අපට ඒවා වෙන් වෙන් වශයෙන් පැවසිය හැකිය:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

එය ඔබට මෙය ලබා දෙයි :

නමුත් ඉහළ මායිම අවශ්‍ය නොවේ, එබැවින් එහි පළල සකසන්න 0px. දැන් අපගේ මායිම් පතුලේ 200pxඅපගේ ත්‍රිකෝණය 200px උස වනු ඇත.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

අපි ලැබෙනු ඇත මෙම :

ඉන්පසු පැති ත්‍රිකෝණ සැඟවීමට, මායිම් වර්ණය විනිවිද පෙනෙන ලෙස සකසන්න. ඉහළ මායිම effectively ලදායී ලෙස මකා දමා ඇති බැවින්, අපට දේශසීමා-ඉහළ වර්ණය විනිවිද පෙනෙන ලෙස සැකසිය හැකිය.

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

අවසාන වශයෙන් අපට මෙය ලැබේ :

වෙනස් ප්රවේශය:

පරිණාමනය සහිත CSS3 ත්‍රිකෝණ භ්‍රමණය වේ

ත්රිකෝණාකාර හැඩය මෙම තාක්ෂණය භාවිතයෙන් සෑදීම පහසුය. මෙම තාක්ෂණය මෙහි ක්‍රියාත්මක වන ආකාරය පැහැදිලි කරන සජීවිකරණයක් දැකීමට කැමති අය සඳහා:

• සජීවිකරණයට සබැඳිය : CSS3 ත්‍රිකෝණයක් සාදා ගන්නේ කෙසේද .
• සහ ඩෙමෝ: පරිණාමනය කර සාදන ලද CSS3 ත්‍රිකෝණ භ්‍රමණය වේ.

එසේ නොමැති නම්, එක් මූලද්‍රව්‍යයක් සමඟ සමස්ථානික සෘජු කෝණික ත්‍රිකෝණයක් සාදා ගන්නේ කෙසේද යන්න පිළිබඳ ක්‍රියාවන් 4 කින් (මෙය ඛේදවාචකයක් නොවේ) සවිස්තරාත්මක පැහැදිලි කිරීමකි.

• සටහන 1: සමස්ථානික නොවන ත්‍රිකෝණ සහ විසිතුරු දේවල් සඳහා, ඔබට 4 වන පියවර දැකිය හැකිය .
• සටහන 2: පහත දැක්වෙන කොටස් වල, විකුණුම්කරුගේ උපසර්ග ඇතුළත් නොවේ. ඒවා කෝඩපන් නිරූපණවලට ඇතුළත් කර ඇත .
• සටහන 3: පහත පැහැදිලි කිරීම සඳහා වන HTML සෑම විටම: <div class="tr"></div>

පියවර 1: බෙදීමක් කරන්න

පහසුයි, එය සහතික කරගන්න width = 1.41 x height. දර්ශන අනුපාතය පවත්වා ගැනීමට සහ ප්‍රතිචාරාත්මක ත්‍රිකෝණයක් සෑදීමට ඔබට ප්‍රතිශත සහ පෑඩින්-පතු භාවිතා කිරීම ඇතුළුව ඕනෑම තාක්ෂණයක් ( මෙහි බලන්න ) භාවිතා කළ හැකිය . පහත රූපයේ, ඩිව් රන් කහ පැහැති මායිමක් ඇත.

එම කොට් In ාශයේ ව්‍යාජ මූලද්‍රව්‍යයක් ඇතුළු කර මවුපියන්ගේ පළල සහ උස 100% ක් ලබා දෙන්න. ව්‍යාජ මූලද්‍රව්‍යයට පහත රූපයේ නිල් පැහැති පසුබිමක් ඇත.

මෙම අවස්ථාවෙහිදී, අපට මෙම CSS ඇත :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

පියවර 2: අපි භ්‍රමණය කරමු

පළමුව, වඩාත්ම වැදගත්: පරිණාමන සම්භවයක් අර්ථ දක්වන්න . මෙම පෙරනිමි ප්රභවය ව්යාජ අංගයක් මධ්යයේ වන අතර, අපි පහළ වමේ එය අවශ්ය වේ. මෙම CSS එකතු කිරීමෙන්ව්‍යාජ මූලද්‍රව්‍යයට :

transform-origin:0 100%; හෝ transform-origin: left bottom;

දැන් අපට ව්‍යාජ මූලද්‍රව්‍යය අංශක 45 කින් භ්‍රමණය කළ හැකිය transform : rotate(45deg);

මෙම අවස්ථාවෙහිදී, අපට මෙම CSS ඇත :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

පියවර 3: එය සඟවන්න

ව්‍යාජ මූලද්‍රව්‍යයේ අනවශ්‍ය කොටස් සැඟවීමට (කහ පැහැති මායිම සමඟ කොට් over ාශය පිරී ඉතිරී යන සියල්ල) ඔබ overflow:hidden;කන්ටේනරය මත තැබිය යුතුය. කහ මායිම ඉවත් කිරීමෙන් පසු, ඔබට ලැබෙනු ඇත ... ත්‍රිකෝණයක් ! :

ඩෙමෝ

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

පියවර 4: තවදුරටත් යන්න ...

තුළ පෙන්වා ඇති පරිදි Demo , ඔබ ත්රිකෝණ රිසිකරණය කළ හැකිය:

1. සෙල්ලම් කිරීමෙන් ඒවා සිහින් හෝ පැතලි කරන්න skewX() .
2. පරිණාමන විවරය සහ භ්‍රමණ දිශාව සමඟ සෙල්ලම් කිරීමෙන් ඒවා වමට, දකුණට හෝ වෙනත් දිශාවකට යොමු කරන්න.
3. ත්‍රිමාණ පරිණාමන දේපල සමඟ යම් ප්‍රත්‍යාවර්තයක් කරන්න .
4. ත්රිකෝණාකාර මායිම් දෙන්න
5. ත්රිකෝණය තුළ රූපයක් තබන්න
6. තවත් බොහෝ දේ ... CSS3 හි බලතල මුදාහරින්න !

මෙම තාක්ෂණය භාවිතා කරන්නේ ඇයි?

1. ත්රිකෝණය පහසුවෙන් ප්රතිචාර දැක්විය හැකිය.
2. ඔබට මායිම සමඟ ත්රිකෝණයක් සෑදිය හැකිය .
3. ඔබට ත්රිකෝණයේ මායිම් පවත්වා ගත හැකිය. මෙයින් අදහස් කරන්නේ ඔබට හෝවර් තත්වය අවුලුවාලීමට හෝ කර්සරය ත්‍රිකෝණය තුළ ඇති විට පමණක් ක්ලික් කරන්න . මේ වගේ සමහර තත්වයන් තුළ බෙහෙවින් ප්රයෝජනවත් බවට පත් විය හැකි මෙම එක් එක් ත්රිකෝණය එය ම සැරිසරා රාජ්ය ඇත එසේ එක් එක් ත්රිකෝණය එය අසල්වැසි රනින් ආලේප නොහැකි.
4. පරාවර්තනය වැනි විසිතුරු බලපෑම් ඔබට කළ හැකිය .
5. 2d සහ 3d පරිණාමන ගුණාංග තේරුම් ගැනීමට එය ඔබට උපකාරී වනු ඇත.

මෙම තාක්ෂණය භාවිතා නොකරන්නේ ඇයි?

1. ප්‍රධානම අඩුපාඩුව නම් බ්‍රව්සරයේ අනුකූලතාවය , 2d පරිණාමන ගුණාංග IE9 + මගින් සහය දක්වන අතර එබැවින් ඔබ IE8 සඳහා සහය දැක්වීමට අදහස් කරන්නේ නම් ඔබට මෙම තාක්ෂණය භාවිතා කළ නොහැක. වැඩි විස්තර සඳහා CanIuse බලන්න . පරාවර්තන බ්රවුසරයේ සහාය IE10 + වැනි 3d පරිණාමන භාවිතා කරන සමහර විසිතුරු බලපෑම් සඳහා ( canIuse බලන්න සඳහා (වැඩි විස්තර සඳහා ).
2. ඔබට ප්‍රතිචාර දැක්විය හැකි කිසිවක් අවශ්‍ය නොවන අතර සරල ත්‍රිකෝණයක් ඔබට සුදුසු නම් ඔබ මෙහි විස්තර කර ඇති දේශසීමා තාක්‍ෂණය සඳහා යා යුතුය: වඩා හොඳ බ්‍රව්සර් අනුකූලතාව සහ මෙහි ඇති විස්මිත තනතුරු වලට ස්තූතියි තේරුම් ගැනීමට පහසුය.

මෙන්න මම නිරූපණය සඳහා නිර්මාණය කළ JSFiddle හි සජීවිකරණයකි .

පහත දැක්වෙන ස්නිපටයද බලන්න.

මෙය තිර විකාශනයකින් සාදන ලද සජීවිකරණ GIF ය

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

අහඹු අනුවාදය

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

සියල්ල එකවරම අනුවාදය

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

අපට පහත දැක්වෙන කොටස ඇති බව කියමු:

<div id="triangle" />

දැන් පියවරෙන් පියවර CSS සංස්කරණය කරන්න, එවිට ඔබට සිදුවන්නේ කුමක්ද යන්න පිළිබඳ පැහැදිලි අදහසක් ලැබෙනු ඇත

පියවර 1: JSfiddle සබැඳිය:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

මෙය සරල බෙදීමකි. ඉතා සරල CSS සමඟ. එබැවින් ගිහියෙකුට තේරුම් ගත හැකිය. ඩිව් මානයන් පික්සල් 150 x 150 මායිම පික්සල් 50 සමඟ ඇත. රූපය අමුණා ඇත:

පියවර 2: JSfiddle සබැඳිය:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

දැන් මම පැති 4 ක මායිම් වර්ණය වෙනස් කළෙමි. රූපය අමුණා ඇත.

පියවර: 3 JSfiddle සබැඳිය:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

දැන් මම div හි උස සහ පළල පික්සල් 150 සිට ශුන්‍යයට වෙනස් කළෙමි. රූපය අමුණා ඇත

පියවර 4: JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

දැන් මම පහළ මායිම හැරුණු විට සියලු මායිම් විනිවිද පෙනෙන බවට පත් කර ඇත්තෙමි. රූපය පහතින් අමුණා ඇත.

පියවර 5: JSfiddle සබැඳිය:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

දැන් මම පසුබිම් වර්ණය සුදු පැහැයට වෙනස් කර ඇත්තෙමි. රූපය අමුණා ඇත.

එබැවින් අපට අවශ්‍ය ත්‍රිකෝණය අපට ලැබුණි.

දැන් සම්පූර්ණයෙන්ම වෙනස් දෙයක් ...

Css උපක්‍රම භාවිතා කරනවා වෙනුවට html ආයතන තරම් සරල විසඳුම් අමතක නොකරන්න:

▲

ප්‍රති ult ලය:

▲

බලන්න: ඉහළ සහ පහළ ත්‍රිකෝණ සඳහා වන HTML ආයතන මොනවාද?

පහත ත්රිකෝණය සලකා බලන්න

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

අපට ලබා දී ඇත්තේ මෙයයි:

එය මෙම හැඩයෙන් එළියට ආවේ ඇයි? පහත රූප සටහනෙහි මානයන් පැහැදිලි කරයි, පහළ මායිම සඳහා 15px භාවිතා කළ බවත් 10px වම් සහ දකුණ සඳහා භාවිතා කළ බවත් සලකන්න.

දකුණු මායිම ඉවත් කිරීමෙන් ද නිවැරදි කෝණ ත්‍රිකෝණයක් සෑදීම පහසුය.

තවත් එක් පියවරක් ඉදිරියට ගෙන යමින්, සීඑස්එස් භාවිතා කරමින් මගේ පිටුපස සහ ඊළඟ බොත්තම් වලට ඊතල එකතු කළෙමි (ඔව්, මම දන්නවා එහි 100% හරස් බ්‍රව්සරය නොවන බව, නමුත් කිසිවක් අඩු නොවේ).

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

හරි, මෙම ත්‍රිකෝණය නිර්මාණය වන්නේ HTML සහ CSS හි මූලද්‍රව්‍යවල මායිම් එකට ක්‍රියා කරන ආකාරය නිසා ...

අපි සාමාන්‍යයෙන් 1 හෝ 2px මායිම් භාවිතා කරන විට, මායිම් එකම පළලකින් එකිනෙකට 45 ° කෝණ සාදන බව අපි කිසි විටෙකත් නොදනිමු . පළල වෙනස් වුවහොත් කෝණ උපාධියද වෙනස් වේ, මා පහත නිර්මාණය කළ CSS කේතය ධාවනය කරන්න:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

ඊළඟ පියවරේදී, අපට පළල හෝ උස නැත, මේ වගේ දෙයක්:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

දැන් අපි අපේ සුදුසු ත්‍රිකෝණය පහත පරිදි කිරීමට වම් සහ දකුණු මායිම් අදෘශ්‍යමාන කරමු:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div class="triangle"></div>

පියවර බැලීමට ස්නිපටය ධාවනය කිරීමට ඔබ අකමැති නම්, එක් රූපයක සියලුම පියවර දෙස බැලීමට මම අනුක්‍රමික අනුක්‍රමයක් නිර්මාණය කර ඇත්තෙමි:

වෙනස් ප්රවේශයක්. රේඛීය ශ්‍රේණිය සමඟ (IE සඳහා, IE 10+ පමණි). ඔබට ඕනෑම කෝණයක් භාවිතා කළ හැකිය:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}

<div class="triangle"></div>

මෙන්න jsfiddle

CSS clip-path

මෙය මෙම ප්‍රශ්නය මග හැරී ඇති බව මට හැඟේ; clip-path

clip-path කෙටියෙන්

clip-pathදේපල සමඟ ක්ලිපින් කිරීම සෘජුකෝණාස්රාකාර කඩදාසි කැබැල්ලකින් හැඩයක් (රවුමක් හෝ පෙන්ටගනයක් වැනි) කැපීමට සමාන වේ. දේපල අයත් වන්නේ “ CSS ආවරණ මොඩියුල මට්ටම 1 ” පිරිවිතරයට ය. පිරිවිතරයේ දැක්වෙන්නේ, “CSS ආවරණ දෘශ්‍ය අංගවල කොටස් අර්ධ වශයෙන් හෝ සම්පූර්ණයෙන් සැඟවීමට ක්‍රම දෙකක් සපයයි: ආවරණ සහ ක්ලිපින්”.

• ස්මාෂිං සඟරාවෙන් උපුටා ගැනීම

clip-pathඑහි පරාමිතීන්හි ඔබ නියම කර ඇති හැඩය කැපීමට එහි මායිමට වඩා මූලද්‍රව්‍යය භාවිතා කරයි. එය සුපිරි සරල ප්‍රතිශත පදනම් කරගත් සම්බන්ධීකරණ පද්ධතියක් භාවිතා කරන අතර එය සංස්කරණය කිරීම ඉතා පහසු වන අතර මිනිත්තු කිහිපයකින් ඔබට එය තෝරාගෙන අමුතු හා විස්මිත හැඩතල නිර්මාණය කළ හැකිය.

ත්රිකෝණාකාර හැඩ උදාහරණය

div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

අවාසිය

එය මේ මොහොතේ විශාල අවාසියක් ඇති කරයි, එකක් නම් එය විශාල වශයෙන් සහාය නොලැබීමයි, සැබවින්ම -webkit-බ්‍රව්සර් තුළ ආවරණය වී ඇති අතර IE සඳහා කිසිදු සහායක් නොමැති අතර ෆයර්ෆොක්ස් හි ඉතා අර්ධ වශයෙන් පමණි.

සම්පත්

වඩා හොඳින් තේරුම් ගැනීමට clip-pathසහ ඔබේම දෑ නිර්මාණය කිරීමට පටන් ගැනීමට ප්‍රයෝජනවත් සම්පත් සහ ද්‍රව්‍ය කිහිපයක් මෙන්න .

• ක්ලිපි - clip-pathඋත්පාදක යන්ත්රයක්
• W3C අපේක්ෂක නිර්දේශ ගොනුව
• MDN clip-pathප්‍රලේඛනය
• clip-path බ්‍රව්සර් සහාය

මෙය පැරණි ප්‍රශ්නයකි, නමුත් මෙම ත්‍රිකෝණ තාක්‍ෂණය භාවිතා කරමින් ඊතලයක් නිර්මාණය කරන්නේ කෙසේද යන්න බෙදා ගැනීම වටී යැයි මම සිතමි.

පියවර 1:

ත්රිකෝණ 2 ක් නිර්මාණය කරමු, දෙවැන්න සඳහා අපි :afterව්යාජ පන්තිය භාවිතා කර අනෙක් ඒවාට පහළින් ස්ථානගත කරමු:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

පියවර 2

දැන් අපට සිදුවන්නේ දෙවන ත්‍රිකෝණයේ ප්‍රමුඛ මායිම් වර්ණය පසුබිමේ එකම වර්ණයට සැකසීමයි:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

සියලුම ඊතල සමඟ ෆෙඩල් කරන්න:
http://jsfiddle.net/tomsarduy/r0zksgeu/

SASS (SCSS) ත්‍රිකෝණ මික්සින්

CSS ත්‍රිකෝණයක් ස්වයංක්‍රීයව ජනනය කිරීම පහසු කිරීම සඳහා (සහ DRY) මා මෙය ලිවීය:

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $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) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

use-case උදාහරණය:

span {
  @include triangle(bottom, red, 10px);
}

ක්‍රීඩා පිටිය

වැදගත් සටහන: සමහර බ්‍රව්සර්වල
ත්‍රිකෝණය පික්සෙල් කර ඇති බවක් පෙනේ නම්, මෙහි විස්තර කර ඇති එක් ක්‍රමයක් උත්සාහ කරන්න .

^{ඔබට ත්‍රිකෝණයට මායිම යෙදීමට අවශ්‍ය නම් මෙය කියවන්න: CSS සමඟ ත්‍රිකෝණයක් සාදන්න?}

සෑම පිළිතුරක්ම පාහේ මායිම භාවිතා කර සාදන ලද ත්‍රිකෝණය කෙරෙහි අවධානය යොමු කරයි, එබැවින් මම linear-gradientක්‍රමවේදය විස්තාරණය කිරීමට යන්නෙමි (@lima_fil හි පිළිතුරෙන් ආරම්භ වූ පරිදි ).

වැනි උපාධි අගයක් භාවිතා කිරීමෙන් අපට අවශ්‍ය ත්‍රිකෝණය ලබා ගැනීම 45°සඳහා නිශ්චිත අනුපාතයකට ගරු කිරීමට බල කෙරෙනු ඇති height/widthඅතර මෙය ප්‍රතිචාර නොදක්වයි:

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*To illustrate*/
  border:1px solid;
}

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

මෙය සිදු කරනවා වෙනුවට දිශාවෙහි පූර්ව නිශ්චිත අගයන් සලකා බැලිය යුතුය to bottom.to top මේ අවස්ථාවේ දී අපි එය ප්රතිචාර දක්වන තබා ඇති අතර ත්රිකෝණය හැඩය ඕනෑම ආකාරයක ලබා ගත හැක ආදිය.

1) සෘජුකෝණාස්රාකාර ත්රිකෝණය

එවැනි ත්රිකෝණය ලබා ගැනීම සඳහා අපි එක රේඛීය-ඵලය අනුක්රමික හා වැනි විකර්ණ දිශාව අවශ්ය to bottom right, to top left, to bottom left, ආදිය

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

2) සමස්ථානික ත්‍රිකෝණය

මේ සඳහා අපට ඉහත මෙන් රේඛීය-ශ්‍රේණියක් 2 ක් අවශ්‍ය වන අතර සෑම එකක්ම පළලින් අඩක් (හෝ උස) ගනී. එය හරියට අපි පළමු ත්‍රිකෝණයේ කැඩපත් රූපයක් නිර්මාණය කරනවා හා සමානයි.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

3) සමාන්තර ත්‍රිකෝණය

ශ්‍රේණියේ උස හා පළල අතර සම්බන්ධතාවයක් තබා ගැනීමට අවශ්‍ය බැවින් මෙය හැසිරවීමට ටිකක් උපක්‍රමශීලී ය. අපට ඉහත ත්‍රිකෝණය සමාන වන නමුත් සමස්ථානික ත්‍රිකෝණය සමාන්තර එකක් බවට පරිවර්තනය කිරීම සඳහා ගණනය කිරීම වඩාත් සංකීර්ණ කරමු.

එය පහසු කිරීම සඳහා, අපගේ ත්‍රිකෝණය ඇතුළත ( height >= width) ඇතුළත ඇද ගැනීමට හැකි වන පරිදි අපගේ කොට් of ාශයේ පළල දන්නා අතර උස විශාල බව අපි සලකා බලමු .

අපට අපගේ ශ්‍රේණිය දෙක ඇති g1අතර g2, නිල් රේඛාව පළල වන අතර div wසෑම ශ්‍රේණියක්ම එයින් 50% ක් ( w/2) ඇති අතර ත්‍රිකෝණයේ සෑම පැත්තකටම සමාන වේ w. හරිත රේඛාව යනු ශ්‍රේණියේ දෙකේම උසයිhg අතර අපට පහසුවෙන් පහත සූත්‍රය ලබා ගත හැකිය:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w --->hg = 0.866 * w

calc()අපගේ ගණනය කිරීම සහ අවශ්‍ය ප්‍රති result ලය ලබා ගැනීම සඳහා අපට විශ්වාසය තැබිය හැකිය :

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

තවත් ක්‍රමයක් වන්නේ ඩිව් හි උස පාලනය කිරීම සහ ශ්‍රේණියේ වාක්‍ය ඛණ්ඩය පහසුවෙන් තබා ගැනීමයි:

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

4) අහඹු ත්රිකෝණය

අහඹු ත්‍රිකෝණයක් ලබා ගැනීම සඳහා, එක් එක් 50% ක තත්වය ඉවත් කිරීමට අපට අවශ්‍ය බැවින් එය පහසුය, නමුත් අපි කොන්දේසි දෙකක් තබා ගත යුතුය (දෙකම එකම උසකින් යුක්ත විය යුතු අතර පළල දෙකේම එකතුව 100% විය යුතුය).

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<div class="tri-1"></div>

නමුත් එක් එක් පැත්ත සඳහා අගයක් අර්ථ දැක්වීමට අපට අවශ්‍ය නම් කුමක් කළ යුතුද? අපි නැවත ගණනය කිරීම කළ යුතුයි!

ගේ නිර්වචනය කරමු hg1සහ hg2අපගේ ඵලය අනුක්රමික උස (දෙකම රතු ඉර සමාන වේ) එදා මෙන් wg1හා wg2අපගේ ඵලය අනුක්රමික පළල ලෙස ( wg1 + wg2 = a). මම ගණනය කිරීම විස්තරාත්මකව නොකියමි, නමුත් අවසානයේ අපට ඇත්තේ:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

දැන් අපි CSS හි සීමාව කරා ළඟා වී ඇති calc()බැවින් අපට මෙය ක්‍රියාත්මක කිරීමට නොහැකි වනු ඇත, එබැවින් අපට අවසාන ප්‍රති result ලය අතින් එකතු කර ඒවා ස්ථාවර ප්‍රමාණය ලෙස භාවිතා කළ යුතුය:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

පාරිතෝෂිකය

අපට භ්‍රමණය සහ / හෝ ඇලවීම ද යෙදිය හැකි බව අප අමතක නොකළ යුතු අතර වැඩි ත්‍රිකෝණයක් ලබා ගැනීමට අපට වැඩි විකල්පයක් ඇත:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

ඇත්ත වශයෙන්ම අපි යම් තත්වයකදී වඩාත් සුදුසු විය හැකි SVG විසඳුම මතකයේ තබා ගත යුතුය:

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

මෙන්න තවත් ප්‍රහේලිකාවක්:

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

තවත් සමහරු දැනටමත් මෙය හොඳින් පැහැදිලි කර ඇත. මෙය ඉක්මණින් පැහැදිලි කරන සජීවිකරණයක් මම ඔබට දෙන්නම් : http://codepen.io/chriscoyier/pen/lotjh

සංකල්ප සමඟ සෙල්ලම් කිරීමට සහ ඉගෙන ගැනීමට ඔබට කේත කිහිපයක් මෙන්න.

HTML:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS:

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

මෙය සමඟ සෙල්ලම් කර සිදුවන්නේ කුමක්දැයි බලන්න. උස සහ පළල බිංදුවට සකසන්න. ඉන්පසු ඉහළ මායිම ඉවත් කර වම් සහ දකුණ විනිවිද පෙනෙන ලෙස සකසන්න, නැතහොත් CSS ත්‍රිකෝණයක් සෑදීමට පහත කේතය දෙස බලන්න:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

ඔබට සෙල්ලම් කිරීමට අවශ්‍ය නම් border-size, widthසහ heightඒවා විවිධ හැඩයන් නිර්මාණය කරන්නේ කෙසේදැයි බලන්න, මෙය උත්සාහ කරන්න:

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}

<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

මේක උත්සාහ කරන්න:-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

මෙය පැරණි එකක් බව මම දනිමි, නමුත් HTML සහ CSS පමණක් භාවිතා කරමින් ත්‍රිකෝණයක් නිර්මාණය කිරීම සඳහා අවම වශයෙන් වෙනස් ක්‍රම 5 ක් වත් ඇති බව මෙම සාකච්ඡාවට එක් කිරීමට කැමැත්තෙමි .

1. භාවිතා කිරීම borders
2. භාවිතා කිරීම linear-gradient
3. භාවිතා කිරීම conic-gradient
4. භාවිතා කිරීම transformසහoverflow
5. භාවිතා කිරීම clip-path

3 වන ක්‍රමය හැර අනෙක් සියල්ලම මෙහි ආවරණය කර ඇති බව මම සිතමි conic-gradient, එබැවින් මම එය මෙහි බෙදා ගන්නෙමි:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>