如何使這樣的白色自舉

如何作出這樣的圖片（這是在紅色圓圈）如何使這樣的白色自舉

enter image description here

<div class="col-sm-2"> 
    <div class="thumbnail"> 
    <img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> 
    </div> 
    <!-- /thumbnail --> 
</div> 
<!-- /col-sm-1 --> 
<div class="col-sm-10"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <strong>myusername</strong> <small><span class="text-muted">commented 5 days ago</span></small> 
    </div> 
    <div class="panel-body"> Panel content Panel content Panel content Panel content Panel content Panel content Panel content Panel content 
    </div> 
    <!-- /panel-body --> 
    </div> 
    <!-- /panel panel-default --> 
</div>

來源

2017-06-14 Aizul Faiz Iswafaza

請提供的jsfiddle鏈接。 – acmsohail

http://getbootstrap.com/javascript/#popovers這應該可以幫助你像this.as你正在使用bootstrap。 – Aslam

查看答案可能對你有幫助。 – LKG

使用下面的CSS部分

工作撥弄

fiddle

個CSS

.panel-heading.angle { 
    position:relative; 
} 
.panel-heading.angle:after { 
    content:''; 
    border-top:10px solid transparent; 
    border-right:10px solid #f5f5f5; 
    border-bottom:10px solid transparent; 
    border-left:10px solid transparent; 
    position:absolute; 
    left:-20px; 
    top:12px; 
} 
.panel-heading.angle:before { 
    content:''; 
    border-top:11px solid transparent; 
    border-right:11px solid #ddd; 
    border-bottom:11px solid transparent; 
    border-left:11px solid transparent; 
    position:absolute; 
    left:-22px; 
    top:11px; 
}

HTML

<div class="panel-heading angle"> 
    <strong>myusername</strong> <small><span class="text-muted">commented 5 days ago</span></small> 
</div>

添加angle類像上面的html部分

來源

2017-06-14 06:48:20 LKG

檢查這個JSFiddle。

您可以通過處理div元素的邊框來獲得此功能。

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 

    border-bottom: 5px solid black; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid #f00; 
} 

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 

    border-left: 60px solid green; 
} 

.arrow-left { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

參考：http://www.cssarrowplease.com/

參考：https://css-tricks.com/snippets/css/css-triangle/

來源

2017-06-14 06:48:58

你必須在CSS中使用after和before。請在衆目睽睽檢查這DEMO

.panel-default:before { 
 
    border-right: 10px solid #ddd; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    position: absolute; 
 
} 
 
.panel-default:after, .panel-default:before { 
 
    color: transparent; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    content: ""; 
 
    left: -5px; 
 
    top: 2px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/><div class="col-sm-2"> 
 
         <div class="thumbnail"> 
 
          <img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> 
 
         </div><!-- /thumbnail --> 
 
        </div><!-- /col-sm-1 --> 
 
        <div class="col-sm-10"> 
 
         <div class="panel panel-default"> 
 
          <div class="panel-heading"> 
 
           <strong>myusername</strong> <small><span class="text-muted">commented 5 days ago</span></small> 
 
          </div> 
 
          <div class="panel-body"> Panel content Panel content Panel content Panel content Panel content Panel content Panel content Panel content 
 
          </div><!-- /panel-body --> 
 
         </div><!-- /panel panel-default --> 
 
        </div>

來源

2017-06-14 06:53:51 acmsohail

如何使這樣的白色自舉

回答

相關問題