如何在不使用任何图片的情况下在div中设计以下效果

问题描述 投票：0回答：4
html css tooltip
4个回答
3
投票

最小标记版本：

2024年答案

我们可以在下面的透明边框区域中创建带有 

conic-gradient()
的工具提示尾部。然后我们使用 
filter: drop-shadow()
创建跟随整个形状的阴影。我们将这些样式设置在工具提示后面的绝对定位伪上，因为我们不希望阴影也应用在关闭按钮上。

/* just to close tooltip from button */
addEventListener('click', e => {
  let _t = e.target;
    
  if(_t.getAttribute('aria-label') === 'close') {
    _t.parentNode.classList.add('closed')
  }
});
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

html, body, button { display: grid }

html { height: 100% }

body { background: radial-gradient(at 0 100%, #dedede, 85%, #165a9b) }

.tooltip {
  --r: 5px; /* tooltip corner rounding */
  --h: 1.25em; /* arrow height */
  --c: #999; /* tooltip background */
  place-self: center;
  position: relative;
  margin-bottom: var(--h); /* reserve arrow space */
  padding: .25em;
  width: 8em;
  font: 700 2em/ 1.375 oswald, sans-serif;
  text-align: center;
  text-transform: uppercase;
    
  &::before {
    position: absolute;
    z-index: -1;
    inset: calc(-1*var(--h));
      /* increase background area with transparent border */
    border: solid var(--h) #0000;
    border-radius: calc(var(--h) + var(--r));
    background: 
      /* main box, restricted to padding-box */
      linear-gradient(var(--c) 0 0) padding-box, 
      /* tooltip tail, within all border-box */
      conic-gradient(
          from 20deg /* tail start angle */ 
          at 43% /* horizontal tail tip position */ 100%, 
          var(--c) 30deg /* angular size of tail */, #0000 0%) 
        0 100% /* place at the bottom *// 
        50% 50% no-repeat  /* limit size & repetition so no overflow */
        border-box;
    filter: drop-shadow(0 6px #434343);
    content: ''
  }
}

.closed { display: none }

.highlight { color: #fff }

/* prettify close button from here on */
button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 1.125em;
  aspect-ratio: 1;
  border: solid 4px currentcolor;
  border-radius: 50%;
  translate: 50% -50%;
  background: #030303;
  color: var(--c);
  font: inherit;
    
  &::before, &::after {
    grid-area: 1/ 1;
    place-self: center;
    width: .625em; height: 4px;
    border-radius: 3px;
    rotate: -45deg;
    background: currentcolor;
    content: ''
  }
    
  &::after { rotate: 45deg }
}
<div class='tooltip'>
  <span class='highlight'>tip:</span> upload your cover image here
  <button aria-label='close'></button>
<div>

如果尾部锯齿状令人不安，我们可以在 

filter
之前使用自定义 SVG 
drop-shadow()
来平滑它。

addEventListener('click', e => {
  let _t = e.target;
    
  if(_t.getAttribute('aria-label') === 'close') {
    _t.parentNode.classList.add('closed')
  }
});
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

html, body, button { display: grid }

html { height: 100% }

body { background: radial-gradient(at 0 100%, #dedede, 85%, #165a9b) }

svg[height='0'] { position: fixed; }

.tooltip {
  --r: 5px; /* tooltip corner rounding */
  --h: 1.25em; /* arrow height */
  --c: #999; /* tooltip background */
  place-self: center;
  position: relative;
  margin-bottom: var(--h); /* reserve arrow space */
  padding: .25em;
  width: 8em;
  font: 700 2em/ 1.375 oswald, sans-serif;
  text-align: center;
  text-transform: uppercase;
    
  &::before {
    position: absolute;
    z-index: -1;
    inset: calc(-1*var(--h));
      /* increase background area with transparent border */
    border: solid var(--h) #0000;
    border-radius: calc(var(--h) + var(--r));
    background: 
      /* main box, restricted to padding-box */
      linear-gradient(var(--c) 0 0) padding-box, 
      /* tooltip tail, within all border-box */
      conic-gradient(
          from 20deg /* tail start angle */ 
          at 50% /* horizontal tail tip position */ 100%, 
          var(--c) 35deg /* angular size of tail */, #0000 0%) 
        0 100% /* place at the bottom *// 
        100% 50% no-repeat  /* limit size & repetition so no overflow */
        border-box;
    filter: blur(2px) url(#smooth) drop-shadow(0 6px #434343);
    content: ''
  }
}

.closed { display: none }

.highlight { color: #fff }

/* prettify close button from here on */
button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 1.125em;
  aspect-ratio: 1;
  border: solid 4px currentcolor;
  border-radius: 50%;
  translate: 50% -50%;
  background: #030303;
  color: var(--c);
  font: inherit;
    
  &::before, &::after {
    grid-area: 1/ 1;
    place-self: center;
    width: .625em; height: 4px;
    border-radius: 3px;
    rotate: -45deg;
    background: currentcolor;
    content: ''
  }
    
  &::after { rotate: 45deg }
}
<svg width='0' height='0'>
  <filter id='smooth' color-interpolation-filters='sRGB'>
    <feComponentTransfer>
      <feFuncA type='gamma' amplitude='4' exponent='3' offset='-.5'>
    </feComponentTransfer>
  </filter>
</svg>

<div class='tooltip'>
  <span class='highlight'>tip:</span> upload your cover image here
  <button aria-label='close'></button>
<div>

原始答案，出于网络历史记录原因而保留：

body { background: lightblue; }
.tooltip {
  position: relative;
  margin: 1em auto;
  padding: .5em .2em;
  width: 10.5em; height: 3em;
  border-radius: .25em;
  box-shadow: 0 .2em 0 black;
  background: #999;
  font: 700 1.6em/1.5 sans-serif;
  text-align: center;
  text-transform: uppercase;
}
button {
  position: absolute;
  top: -.75em; right: -.75em;
  border: solid .2em;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: black;
  color: #999;
  font: 900 .65em/1 sans-serif;
    text-align: center;
}
.tooltip:after {
  position: absolute;
  z-index: -1;
  right: 25%; bottom: -.75em;
  width: 2em; height: 2em;
  box-shadow: 0 .35em 0 black;
  transform: rotate(30deg) skewY(-60deg);
  background: inherit;
  content: '';
}
.highlight { color: white; }
.highlight:after, .highlight:before {
  position: absolute;
  top: 100%; right: 31.025%;
  width: 1.725em; height: .2em;
  transform: skewX(-30deg);
  background: #999;
  content: '';
}
.highlight:after {
  right: 30.65%;
  transform: skewX(-60deg);
}
<div class='tooltip'>
  <span class='highlight'>tip:</span> upload your cover image here
  <button aria-label='close'>x</button>
<div>

0
投票

请参阅纯CSS关闭按钮（CSS中的关闭按钮）和http://v2.desandro.com/resources/css-speech-bubble-icon/了解实际踪迹。

0
投票

您可以在CSS中执行关闭按钮和箭头，但箭头的阴影是不可能的。

看下面的代码

HTML

    <div id="coverImageToolTip">
    <div class="close"><a href="#">X</a></div>
    <p>
    <font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE
    </p>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

      .close a{
    position:absolute;
    right:-5px; top:-8px;
    display:inline-block;
    background:black;
    padding:2px 6px;
    color:white;
    border:solid grey 3px;
    border-radius:22px;
    font-size:12px; 
    text-decoration:none
}
        #tail2 {
            position:absolute;
            bottom:-19px;
            left:80px;
            width:0;height:0;
            border-color: grey transparent transparent  grey  ;
            border-width:10px;
            border-style:solid;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(1deg); /* Safari and Chrome */
            -o-transform:rotate(90deg); /* Opera */
        }

演示

0
投票

您可以使用 

before
和 
after
模拟接近图像的箭头形状。看看这个演示：http://jsfiddle.net/j34um/3/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.