如何在Bootstrap下创建三角形形状？

我在一个项目的html中有12个列。我想把三角形放在任何div的照片下。如何在Bootstrap下创建三角形形状？

和我的html代码就是这样。

<div class="container"> 
            <div class="row"> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#2EFE2E">A+</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#58FA58">A</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#81F781">A-</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#81F79F">B+</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding sidiv"><div class="info-box"><span class="info-box-icon" >B</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#A9F5BC">B-</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#D0FA58">C+</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#F7FE2E">C</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE9A2E">C-</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE642E">D+</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FE2E2E">D</span></div></div> 
            <div class="col-md-1 col-sm-1 col-xs-1 nopadding"><div class="info-box"><span class="info-box-icon" style="background-color:#FF0000;">D-</span></div></div> 
           </div> 
           </div>

我该如何在Bootstrap或css或jquery或bla中使用这个三角形。？感谢所有？

来源

2017-02-22 Hüseyin Okumuş

只需使用引导glyphicons class="glyphicon glyphicon-triangle-top"把它放在你的div下使用CSS。

工作示例使用跨度

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      .col-xs-1 { 
 
       height: 15px; 
 
      } 
 
      </style> 
 
      </head> 
 
      <body> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-1" style="background-color: blue;"></div> 
 
    <div class="col-xs-1" style="background-color: green;"></div> 
 
    <div class="col-xs-1" style="background-color: brown;"></div> 
 
    <div class="col-xs-1" style="background-color: red;"></div> 
 
    <div class="col-xs-1" style="background-color: blue;"></div> 
 
    <div class="col-xs-1" style="background-color: green;"></div> 
 
    <div class="col-xs-1" style="background-color: red;"></div> 
 
    <div class="col-xs-1" style="background-color: green;"></div> 
 
    <div class="col-xs-1" style="background-color: red;"></div> 
 
    <div class="col-xs-1" style="background-color: green;"></div> 
 
    <div class="col-xs-1" style="background-color: red;"></div> 
 
    <div class="col-xs-1" style="background-color: brown;"></div> 
 
    <span class="glyphicon glyphicon-triangle-top" style="color: black;"></span> 
 
</div> 
 
</div> 
 
    </body> 
 
    </html>

一个好处是，你可以使用JavaScript轻松操控它。

来源

2017-02-22 14:00:02 neophyte

感谢新手们 –

这是一般的想法，随意根据您的布局更改颜色或位置等任何规则。

HTML：

<div class="sidiv">B</div>

CSS：

.sidiv { 
    position: relative; 
    padding-left: 15px; 
} 

.sidiv:after { 
    position: absolute; 
    bottom: -20px; 
    left: 0px; 
    content: ""; 

    width: 0px; 
    height: 0px; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-bottom: 20px solid red; 
}

的jsfiddle： https://jsfiddle.net/6t6kz4ws/

来源

2017-02-22 13:38:56

谢谢丹尼尔我会尝试 –

如何在Bootstrap下创建三角形形状？

回答

相关问题