Как разместить блок AP поверх другой линии с конусом?

Question

HOME Это код, который у меня есть.

<div class="row">
  <div class="col-sm">
  </div>
  <div class="col-sm">
    <p align="center" class="savings-calculator-p">SAVINGS CALCULATOR</p>
  </div>
  <div class="col-sm">
  </div>
</div>

Как сделать интерфейс похожим на приведенный ниже

Answer 1

Используйте загрузчик Bootstrap и всегда показывайте его

Поскольку вы уже используете загрузчик, вам нужно выбрать popover .Это краткое и, следовательно, легко поддерживать.

$('.popover-visible') .popover('show') .off('click');

<div class="container">
  <div class="row pt-5">
    <div class="col-sm ">
    </div>
    <div class="col-sm popover-visible mt-5" 
         data-container="body"
         data-toggle="popover"
         data-placement="top"
         data-content="SAVINGS CALCULATOR">
      <p align="center" class="savings-calculator-p">CURRENT SAVING DONE(R)</p>
    </div>
    <div class="col-sm">
    </div>
  </div>
</div>

https://codepen.io/anon/pen/wYJERz

Answer 2

Like This

Немного хитрости CSS, и вы получите почти точную копию того, что вам нужно.

* Вы можете поиграть с настройками, чтобы получить желаемый вид.Для примера см. 2 изображения.

Pure & Simple - Quick & Easy CSS

Никаких внешних сценариев или javaScrtipt не требуется.:)

body {
  padding-top: 15px;
}

.myContent {
  border: 0.8px solid #ddd;
}

#myPage .savings {
  position: relative;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 4px #ccc;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: #777;
  font-family: arial;
  margin: 0 auto;
  padding: 8px 10px 6px 10px;
  max-width: 180px;
}

#myPage .savings:after,
#myPage .savings:before {
  position: absolute;
  left: 50%;
  top: 100%;
  border: solid transparent;
  content: "";
}

#myPage .savings:before {
  margin-left: -14px;
  border-width: 20px;
  border-top-color: #eee;
}

#myPage .savings:after {
  border-top-color: #ffffff;
  border-width: 16px;
  margin-left: -10px;
}

<div id="myPage">
  <div class="savings">
    SAVINGS CALCULATOR
  </div>
  <div class="myContent">
  </div>
</div>

Answer 3

Используйте этот инструмент для создания пользовательского CSS - http://www.cssarrowplease.com/, или используйте приведенный ниже фрагмент кода

.arrow_box {
  font-size: 12px;
  text-align: center;
  max-width: 200px;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  background: #ffffff;
  font-family: sans-serif;
  border: 1px solid #cccccc;
}
.arrow_box:after, .arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}
.arrow_box:before {
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #cccccc;
  border-width: 11px;
  margin-left: -11px;
}

<div class="arrow_box">
  SAVINGS CALCULATOR
</div>

Answer 4

Я думаю, это будет полезно для вас.

$(document).ready(function(){
  $('.col-sm-4').on('mouseover', function(ev) {
    $('.savings-calculator-p').addClass('show');
    $('.savings-calculator-p').css('left', ev.clientX - 80 + 'px');
  })
  $('.col-sm-4').on('mousemove', function(ev) {
    $('.savings-calculator-p').css('left', ev.clientX - 80 + 'px');
  })
  $('.col-sm-4').on('mouseleave', function(ev) {
    $('.savings-calculator-p').removeClass('show')
  })
})

.row {
  position: relative;
  display: flex;
}
.col-sm-4 {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.savings-calculator-p {
  font-size: 12px;
  display: inline-block;
  text-align: center;
  max-width: 200px;
  margin: 0 auto;
  padding: 10px;
  position: fixed;
  background: #ffffff;
  font-family: sans-serif;
  border: 1px solid #cccccc;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: visible;
}
.show {
  opacity: 1;
  visibility: visible;
}
.savings-calculator-p:after, .savings-calculator-p:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.savings-calculator-p:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}
.savings-calculator-p:before {
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #cccccc;
  border-width: 11px;
  margin-left: -11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <p align="center" class="savings-calculator-p">SAVINGS CALCULATOR</p>
  <div class="col-sm-4">
    Header 1
  </div>
  <div class="col-sm-4">
    Header 2
  </div>
  <div class="col-sm-4">
    Header 3
  </div>
</div>

Answer 5

Попробуйте и все готово ...

p.savings-calculator-p {
    background-color: #EEE;
    width: max-content;
    padding: 5px 20px;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
    position: relative;
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));
}
p.savings-calculator-p:after {
    display: block;
    content: '';
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    margin: auto;
    background: #EEE;
    width: 20px;
    height: 20px;
    z-index: -1;
    transform: rotateZ(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
                   <div class="col-sm">
                   </div>
                   <div class="col-sm">
                       <p align="center" class="savings-calculator-p">SAVINGS CALCULATOR</p>
                     </div>
                    <div class="col-sm">
                   </div>
              </div>