如何使这个白色的boostrap

Question

如何拍这张照片（红圈）

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

Answer 1

使用以下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>

像上面的html部分

一样添加angle类

Answer 2

选中JSFiddle。

你可以通过处理div元素的border来实现这一点。

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

Answer 3

您必须在css中使用after和before。请在完整视图DEMO

中查看此内容

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;