มี CSS รูปร่างที่แตกต่างกันมากมายที่CSS Tricks - รูปร่างของ 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 ...

... และในที่สุดคุณทำให้เส้นขอบทั้งสองด้านโปร่งใส:

ผลลัพธ์เป็นรูปสามเหลี่ยม

เส้นขอบใช้ขอบมุมที่พวกเขาตัดกัน (มุม 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;
}

และเราจะได้สิ่งนี้ :

จากนั้นเมื่อต้องการซ่อนสามเหลี่ยมสองด้านให้ตั้งค่าสีขอบให้โปร่งใส เนื่องจากขอบด้านบนถูกลบอย่างมีประสิทธิภาพเราสามารถตั้งค่าขอบสีด้านบนให้โปร่งใสเช่นกัน

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

ในที่สุดเราก็ได้สิ่งนี้ :

วิธีการที่แตกต่าง:

CSS3 trianglesพร้อมการแปลงแบบหมุน

รูปสามเหลี่ยมสวยง่ายต่อการใช้เทคนิคนี้ สำหรับผู้ที่ต้องการดูภาพเคลื่อนไหวอธิบายว่าเทคนิคนี้ทำงานที่นี่ได้อย่างไร:

• เชื่อมโยงไปยังAnimation: วิธีที่จะทำให้CSS3สามเหลี่ยม
• และDEMO: รูปสามเหลี่ยมCSS3 ที่ทำจากการหมุนแบบหมุน

มิฉะนั้นนี่คือคำอธิบายโดยละเอียดใน 4 การกระทำ (นี่ไม่ใช่โศกนาฏกรรม) ของวิธีการทำสามเหลี่ยมหน้าจั่วมุมฉากกับองค์ประกอบหนึ่ง

• หมายเหตุ 1: สำหรับรูปสามเหลี่ยมหน้าจั่วและไม่ใช่สิ่งแฟนซีคุณสามารถดูขั้นตอนที่ 4
• หมายเหตุ 2: ในตัวอย่างต่อไปนี้คำนำหน้าผู้ขายจะไม่รวม พวกเขาจะรวมอยู่ในการสาธิต codepen
• หมายเหตุ 3: HTML สำหรับคำอธิบายต่อไปนี้เสมอ: <div class="tr"></div>

ขั้นตอนที่ 1:สร้าง div

width = 1.41 x heightง่ายเพียงแค่ให้แน่ใจว่า คุณอาจจะใช้เทคนิคใด ๆ ( ดูที่นี่ ) รวมถึงการใช้ร้อยละและ padding ด้านล่างเพื่อรักษาอัตราส่วนและทำให้สามเหลี่ยมตอบสนอง ในภาพต่อไปนี้ div มีเส้นขอบสีเหลืองทอง

ใน div นั้นใส่องค์ประกอบเทียมและให้ความกว้างและความสูง 100% ของ parent องค์ประกอบหลอกมีพื้นหลังสีน้ำเงินในภาพต่อไปนี้

ณ จุดนี้เรามี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: ซ่อนมัน

ในการซ่อนส่วนที่ไม่ต้องการขององค์ประกอบหลอก (ทุกสิ่งที่ล้น div ด้วยเส้นขอบสีเหลือง) คุณเพียงแค่ต้องตั้งค่า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: ไปต่อ ...

ดังที่แสดงในตัวอย่างคุณสามารถปรับแต่งรูปสามเหลี่ยมได้:

1. skewX()ทำให้พวกเขามีทินเนอร์หรือประจบด้วยการเล่นกับ
2. ทำให้พวกมันชี้ไปทางซ้ายขวาหรือทิศทางอื่น ๆ โดยการเล่นกับทิศทางการแปลงหรือการหมุนและการหมุน
3. สร้างการสะท้อนกลับด้วยคุณสมบัติการแปลง 3D
4. กำหนดขอบสามเหลี่ยม
5. ใส่ภาพภายในรูปสามเหลี่ยม
6. อีกมากมาย ... ปลดปล่อยพลังของCSS3 !

ทำไมต้องใช้เทคนิคนี้

1. สามเหลี่ยมสามารถตอบสนองได้อย่างง่ายดาย
2. คุณสามารถทำให้รูปสามเหลี่ยมที่มีชายแดน
3. คุณสามารถรักษาขอบเขตของรูปสามเหลี่ยม ซึ่งหมายความว่าคุณสามารถเรียกรัฐเลื่อนหรือคลิกเหตุการณ์เฉพาะเมื่อเคอร์เซอร์อยู่ภายในสามเหลี่ยม สิ่งนี้สามารถเป็นประโยชน์อย่างมากในบางสถานการณ์เช่นนี้ซึ่งสามเหลี่ยมแต่ละอันไม่สามารถซ้อนทับมันเป็นเพื่อนบ้านดังนั้นสามเหลี่ยมแต่ละอันมีสถานะการโฮเวอร์ของตัวเอง
4. คุณสามารถสร้างเอฟเฟกต์แฟนซีเช่นภาพสะท้อนได้
5. มันจะช่วยให้คุณเข้าใจคุณสมบัติการแปลง 2d และ 3d

ทำไมไม่ใช้เทคนิคนี้

1. ข้อเสียเปรียบหลักคือความเข้ากันได้ของเบราว์เซอร์คุณสมบัติการแปลง 2d ได้รับการสนับสนุนโดย IE9 + ดังนั้นคุณจึงไม่สามารถใช้เทคนิคนี้หากคุณวางแผนที่จะรองรับ IE8 ดูCanIuseสำหรับข้อมูลเพิ่มเติม สำหรับเอฟเฟกต์แฟนซีที่ใช้การแปลง 3 มิติเช่นการสนับสนุนเบราว์เซอร์รีเฟลคชันคือ IE10 + (ดูcanIuseสำหรับข้อมูลเพิ่มเติม)
2. คุณไม่ต้องการการตอบสนองใด ๆ และสามเหลี่ยมธรรมดานั้นใช้ได้สำหรับคุณแล้วคุณควรใช้เทคนิคของเส้นขอบที่อธิบายไว้ที่นี่: ความเข้ากันได้ของเบราว์เซอร์ที่ดีขึ้นและเข้าใจง่ายขึ้น

นี่คือภาพเคลื่อนไหวใน JSFiddle ที่ฉันสร้างขึ้นเพื่อสาธิต

ดูตัวอย่างด้านล่าง

นี่คือ Animated GIF ที่สร้างจาก Screencast

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 ต่อไปนี้:

<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;
    }

นี่คือ div ที่เรียบง่าย ด้วย CSS ที่ง่ายมาก คนธรรมดาสามารถเข้าใจได้ Div มีขนาด 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;
}

ตอนนี้ฉันเปลี่ยนสีของเส้นขอบทั้งสี่ด้าน แนบภาพแล้ว

ขั้นตอนที่ 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 entity:

▲

ผลลัพธ์:

▲

ดู: เอนทิตี HTML สำหรับรูปสามเหลี่ยมขึ้นและลงคืออะไร

พิจารณาสามเหลี่ยมด้านล่าง

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

นี่คือสิ่งที่เราได้รับ:

ทำไมมันออกมาในรูปแบบนี้? แผนภาพด้านล่างอธิบายขนาดโปรดทราบว่าใช้ 15px สำหรับขอบด้านล่างและใช้ 10px สำหรับซ้ายและขวา

มันค่อนข้างง่ายที่จะสร้างสามเหลี่ยมมุมฉากด้วยการลบขอบด้านขวาออก

การก้าวไปอีกขั้นหนึ่งโดยใช้ css ตามนี้ฉันได้เพิ่มลูกศรลงไปที่ปุ่มย้อนกลับและปุ่มถัดไป (ใช่ฉันรู้ว่าไม่ใช่เบราว์เซอร์ข้าม 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 code ที่ฉันสร้างด้านล่าง:

.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 Masking Module ระดับ 1 ” สถานะข้อมูลจำเพาะ“ การปิดบัง CSS มีสองวิธีสำหรับการซ่อนองค์ประกอบบางส่วนขององค์ประกอบภาพ: การปิดบังและการตัดส่วน "

• สารสกัดจากนิตยสาร Smashing

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 และเพียงบางส่วนใน FireFox

ทรัพยากร

นี่คือแหล่งข้อมูลและวัสดุที่มีประโยชน์ที่จะช่วยให้เข้าใจมากขึ้นclip-pathและเริ่มสร้างของคุณเอง

• Clippy - clip-pathเครื่องกำเนิดไฟฟ้า
• ไฟล์แนะนำผู้สมัคร W3C
• clip-pathเอกสารMDN
• clip-path สนับสนุนเบราว์เซอร์

นี่เป็นคำถามเก่า แต่ฉันคิดว่าจะคุ้มค่าที่จะแบ่งปันวิธีสร้างลูกศรโดยใช้เทคนิคสามเหลี่ยมนี้

ขั้นตอนที่ 1:

ให้สร้างสามเหลี่ยมสองรูปสำหรับอันที่สองเราจะใช้: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 โดยอัตโนมัติ:

// 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;
}

ตัวอย่างการใช้งาน:

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

หน้าสนามเด็กเล่น

หมายเหตุสำคัญ:
ถ้าสามเหลี่ยมดูเหมือนpixelatedในเบราว์เซอร์บางลองหนึ่งในวิธีการที่อธิบายที่นี่

^{หากคุณต้องการใช้เส้นขอบกับสามเหลี่ยมอ่าน: สร้างสามเหลี่ยมด้วย 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) สามเหลี่ยมด้านเท่า

อันนี้ค่อนข้างยากที่จะจัดการเพราะเราจำเป็นต้องรักษาความสัมพันธ์ระหว่างความสูงและความกว้างของการไล่ระดับสี เราจะมีรูปสามเหลี่ยมเหมือนกันกับด้านบน แต่เราจะทำการคำนวณที่ซับซ้อนมากขึ้นเพื่อแปลงสามเหลี่ยมหน้าจั่วให้เป็นรูปสามเหลี่ยมด้านเท่า

เพื่อให้ง่ายเราจะพิจารณาว่าความกว้างของ div ของเรานั้นเป็นที่รู้จักและความสูงนั้นใหญ่พอที่จะวาดรูปสามเหลี่ยมภายในของเราได้ ( height >= width)

เรามีสองลาดของเราg1และg2สายสีฟ้าคือความกว้างของdiv wแต่ละลาดจะมี 50% ของมัน ( w/2) และด้านข้างของรูปสามเหลี่ยมแต่ละ sould wจะเท่ากับ เส้นสีเขียวคือความสูงของการไล่ระดับสีทั้งสองhgและเราสามารถรับสูตรด้านล่างได้อย่างง่ายดาย:

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

เราสามารถพึ่งพาcalc()เพื่อทำการคำนวณของเราและเพื่อให้ได้ผลลัพธ์ที่ต้องการ:

.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>

อีกวิธีหนึ่งคือการควบคุมความสูงของ 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()เราจะไม่สามารถใช้งานได้ดังนั้นเราจึงต้องรวบรวมผลลัพธ์สุดท้ายด้วยตนเองและใช้เป็นขนาดคงที่:

.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>

ฉันรู้ว่านี่เป็นวิธีเก่า แต่ฉันต้องการเพิ่มในการสนทนานี้ว่ามีอย่างน้อย 5 วิธีในการสร้างสามเหลี่ยมโดยใช้ HTML & CSS เพียงอย่างเดียว

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>