สีเส้นขอบที่กำหนดเองของสามเหลี่ยม CSS

กำลังพยายามใช้สีฐานสิบหกที่กำหนดเองสำหรับสามเหลี่ยม css ของฉัน (เส้นขอบ) อย่างไรก็ตามเนื่องจากมันใช้คุณสมบัติเส้นขอบฉันจึงไม่แน่ใจว่าจะทำอย่างไร ฉันต้องการหลีกเลี่ยง javascript และ css3 เพียงเพราะความเข้ากันได้ ฉันพยายามให้สามเหลี่ยมมีพื้นหลังสีขาวที่มีเส้นขอบ 1px (รอบ ๆ ด้านที่ทำมุมของสามเหลี่ยม) ด้วยสี # CAD5E0 เป็นไปได้หรือไม่ นี่คือสิ่งที่ฉันมีจนถึงตอนนี้:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}​

ซอของฉัน: http://jsfiddle.net/4ZeCz/

คุณต้องปลอมด้วยสามเหลี่ยมสองอัน ....

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

อัพเดต Fiddle ที่นี่

ฉันรู้ว่าคุณยอมรับ แต่ตรวจสอบอันนี้ด้วย css น้อย:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/

ฉันคิดว่านี่เป็นวิธีที่ง่ายกว่าโดยใช้คลิปพา ธ :

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}

<div class="container">
test content
</div>

อีกวิธีหนึ่งในการทำสิ่งนี้ให้สำเร็จโดยเฉพาะอย่างยิ่งสำหรับผู้ที่ต้องการให้สิ่งนี้ทำงานกับสามเหลี่ยมด้านเท่าหรือแม้แต่ย้อยเหมือนที่ฉันทำคือใช้filter: drop-shadow(...)กับหลายค่าและไม่มีรัศมีเบลอ สิ่งนี้มีประโยชน์เพิ่มเติมจากการไม่ต้องการองค์ประกอบหลายรายการหรือการเข้าถึงทั้งก่อนและหลัง (ฉันพยายามทำสิ่งนี้ให้สำเร็จด้วย: after เนื้อหาที่อยู่ในบรรทัดดังนั้นจึงต้องการหลีกเลี่ยงการวางตำแหน่งแบบสัมบูรณ์ด้วย)

สำหรับกรณีข้างต้น CSS ของ after อาจมีลักษณะเช่นนี้ ( fiddle ):

.container {
  margin-left: 15px;
  width: 200px;
  background: #FFFFFF;
  border: 1px solid #CAD5E0;
  padding: 4px;
  position: relative;
  min-height: 200px;
}
.container:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}

<div class="container">
  Test Container
</div>

ฉันคิดว่ามีข้อ จำกัดหรือแปลก ๆ อยู่บ้าง:

• ไม่รองรับ IE11 (แม้ว่าจะดูดีใน FF, Chrome และ Edge)
• ฉันไม่ค่อยแน่ใจว่าทำไม. 5px สำหรับ<offset-y>ค่าใน drop-shadow ที่สอง () ด้านบนจึงดูเหมือน 1px มากกว่า 1px จะมีแม้ว่าฉันคิดว่ามันเกี่ยวข้องกับตรีโกณมิติ (แม้ว่าอย่างน้อยในจอภาพของฉันฉันก็ไม่เห็นความแตกต่างระหว่าง ค่าตามจริงหรือ. 5px หรือแม้แต่. 1px สำหรับเรื่องนั้น)
• เส้นขอบที่มากกว่า 1px (ลักษณะที่ปรากฏในแบบนั้น) ดูเหมือนจะไม่ได้ผล หรืออย่างน้อยฉันก็ยังไม่พบวิธีแก้ปัญหา แต่ดูด้านล่างสำหรับวิธีที่น้อยกว่าที่เหมาะสมในการไปให้ใหญ่ขึ้นเล็กน้อย (ฉันคิดว่าพารามิเตอร์ที่ 4 ที่มีเอกสาร แต่ไม่รองรับ ( <spread-radius>) ของ drop-shadow () อาจเป็นสิ่งที่ฉันกำลังมองหาแทนที่จะเป็นค่าตัวกรองหลายค่า แต่การเพิ่มเข้าไปในสิ่งที่ขัดข้องโดยสิ้นเชิง) ที่นี่คุณสามารถดูสิ่งที่ เริ่มเกิดขึ้นเมื่อเกิน 1px ( ซอ ):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}

<div class="container">
  Test Container
</div>

สังเกตความสนุกสนานที่อันแรก (สีเขียว) ถูกนำไปใช้ครั้งเดียว แต่อันที่สอง (สีแดง) จะถูกนำไปใช้ทั้งกับสามเหลี่ยมสีเหลืองที่สร้างผ่านเส้นขอบเช่นเดียวกับเงาหล่นสีเขียว () และอันสุดท้าย (สีน้ำเงิน) จะถูกนำไปใช้กับทั้งหมดข้างต้น (บางทีอาจเกี่ยวข้องกับลักษณะที่ปรากฏ. 5px ด้วย)

แต่ฉันเดาว่าคุณสามารถใช้ประโยชน์จากการสร้างเงาตกกระทบซึ่งกันและกันได้หากคุณต้องการอะไรที่ดูกว้างกว่า 1px โดยเปลี่ยนเป็นสิ่งต่อไปนี้ ( ซอ ):

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

โดยที่อันแรกมีการตั้งค่ารัศมีเบลอ (2.5px ในกรณีนี้แม้ว่าผลลัพธ์จะปรากฏเป็นทวีคูณ) และส่วนที่เหลือทั้งหมดจะเบลอที่ 0 แต่จะใช้ได้เฉพาะกับสีเดียวกันในทุกด้านและให้ผลลัพธ์ ในบางมุมที่ดูโค้งมนและขอบที่ค่อนข้างหยาบยิ่งคุณไปกันใหญ่

.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}