مثلث مع CSS مع الحدود [نسخة مكررة]

Question

هذا السؤال لديه بالفعل إجابات هنا:

كيفية إنشاء مثلث مجوف في CSS [مكررة] (3 إجابات)

مغلق منذ 5 سنوات.

أولاً إليك الكمان: http://jsfiddle.net/krish7878/kuG6X/3/

أحتاج إلى مثلث CSS به حدود لفقاعة نصية فقط، ويجب أن تكون الخلفية شفافة.

شفرة:

لغة البرمجة:<div class="arrow-up"> </div>

CSS:

.arrow-up {
  position:absolute;
  top:50px;
  left:5px;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 42px solid transparent;
  border-top: 42px solid black;
  margin: 10px; 
  -ms-transform: rotate(315deg); /* IE 9 */
  -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
  transform: rotate(315deg);
}

Answer 1

لقد نشر شخص ما بالفعل إجابة جيدة على هذا السؤال: https://stackoverflow.com/a/18607208/1320911

http://jsfiddle.net/wmDNr/3/

 .triangle { 
     position: relative;
     width: 20px;
     margin-top: 100px;
 }
 .triangle>div { 
     width: 20px;
     height: 2px;
     background: red;
     margin-top: 100px;
 }

 .triangle>div:before {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(56deg);
     -moz-transform: rotate(56deg);
     -ms-transform: rotate(56deg);
     transform: rotate(56deg);
     position: absolute;
     top: -8px;
     right: -5px;
 }
 .triangle>div:after {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(-56deg);
     -moz-transform: rotate(-56deg);
     -ms-transform: rotate(-56deg);
     transform: rotate(-56deg);
     position: absolute;
     top: -8px;
     left: -5px;
 }

Answer 2

لماذا تحتاج إلى استخدام CSS؟انها مجرد بايت.استخدم أشكال html الهندسية الخاصة للمثلثات:

Normal Triangle: △
Right Showing Triangle:  ▷  
Down Pointing Triangle: ▽ 
Left Pointing Triangle: ◁

يوفر الكثير من مجهودك وأسرع عبر الإنترنت.

⚠:تحقق من توافق المتصفح

مرجع هندسي كامل: http://www.alanwood.net/unicode/geometric_shapes.html