ブートストラップでdivの下に三角形を作る方法は？

私は自分のHTMLにプロジェクトのための12の列を持っています。私は、写真のようなdivの下に三角形を入れたいと思います。ブートストラップでdivの下に三角形を作る方法は？

とそのような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>

この三角形は、ブートストラップ、CSS、jquery、またはblaでどのように行うことができますか？？ありがとうございます。

出典

2017-02-22 Hüseyin Okumuş

単にブートストラップglyphiconsを使用0 cssを使用してdivの下に置きます。

実施例

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

スパンを使用する利点の1つは、JavaScriptを使用して簡単に操作できます。

出典

2017-02-22 14:00:02 neophyte

ありがとうございましたneophyte's –

これは一般的な考えです。レイアウトに基づいて色や位置などのルールを自由に変更できます。

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

ありがとうダニエル私はお試しください –

ブートストラップでdivの下に三角形を作る方法は？

答えて

関連する問題