如何使用css在右下角div添加图像

Question

我目前使用bootstrap v3.3.4使用此选项卡... CSS：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: #92278f;
    border-width: 1px;
    border-style: solid;
    border-color: #92278f;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: #92278f;
    -moz-border-left-colors: none;
    border-image: none;
}
.nav-tabs {
    border-bottom: 4px solid #92278f;
}

DOM：

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a></li>
    <li><a href="#student" data-toggle="tab">Student</a></li>
</ul>

我目前的输出：

我如何添加此图片：

在底部并变得像这样？

Answer 1

仅限CSS解决方案。

您无法修改无序列表（ul）底部边框。而是在选项卡下添加div并在其前面添加三角形。

/*to make the triange*/
.row:before {
  float: right;
  width: 0;
  height: 0;
  
  border-style: solid;
  border-width: 0 41px 23px 0; /*width and height*/
  border-color: transparent #92278F transparent transparent;
}

/*chnage active tab color and bottom border*/
.nav-tabs {
  border-bottom: 4px solid #92278F !important;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  background-color: #92278F !important;
  color: white !important;
}

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


<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#parent" data-toggle="tab">Parent</a>
  </li>
  <li><a href="#student" data-toggle="tab">Student</a>
  </li>
</ul>
<div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-3">
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="col-md-3">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3">
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

我更新了你的标记，以便与bootstrap相匹配。我将图像添加到内容面板而不是ul.nav-tabs

不需要为图像添加额外标记。使用伪元素:after完成。

＆＃13;

＆＃13;

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Loading custom CSS after bootstrap's -->
<style>
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: #92278f;
    border-width: 1px;
    border-style: solid;
    border-color: #92278f;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: #92278f;
    -moz-border-left-colors: none;
    border-image: none;
  }
  .nav-tabs {
    border-bottom: 4px solid #92278f;
  }
  /*THE CHANGES I MADE*/
  .tab-pane {
    position: relative;
  }
  .tab-pane:after {
    position: absolute;
    content: "";
    width: 41px;
    height: 23px;
    background: url(http://i.stack.imgur.com/XYs3f.png);
    right: 0;
  }
</style>

<div role="tabpanel">
  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a>
    </li>
    <li><a href="#student" data-toggle="tab">Student</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="parent">Parent Tab Content</div>
    <div role="tabpanel" class="tab-pane" id="student">Student Tab Content</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1.将ul的父元素设置为'position：relative' 2.添加一个新的div作为ul的兄弟姐妹为'position：absolute; background：the image url' 3.相应调整css中图像div的“顶部”和“右侧”

<div style="position: relative">    
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#parent" data-toggle="tab">Parent</a></li>
        <li><a href="#student" data-toggle="tab">Student</a></li>
    </ul>
    <div style="position: absolute;background:(imageurl);top:10px;right:0px"/>
</div>