css实现多角度对话框对话气泡语音气泡效果代码-html代码-BFW代码库

css实现多角度对话框对话气泡语音气泡效果代码

代码语言：html

代码描述：css实现多角度对话框对话气泡语音气泡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        [speech-bubble], [speech-bubble] * { box-sizing: border-box }
        
        [speech-bubble]{
          --bbColor: grey;
          --bbArrowSize: 1.5rem;
          --bbBorderRadius: 0.25rem;
          --bbPadding: 1rem;
          background: var(--bbColor);
          border-radius: var(--bbBorderRadius);
          padding: var(--bbPadding);
          position: relative;
        }
        
        [speech-bubble]::before{
          content: ''; 
          position: absolute;
          background: var(--bbColor);
        }
        
        [speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
        [speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
        [speech-bubble][pleft]  { margin-left: var(--bbArrowSize); }
        [speech-bubble][pright] { margin-right: var(--bbArrowSize); }
        
        
        /* bottom and top  */
        [speech-bubble][pbottom]::before,
        [speech-bubble][ptop]::before{
          --width: calc(var(--bbArrowSize) / 2 * 3);
          height: var(--bbArrowSize);
          width: var(--width);
        }
        
        /* bottom */
        [speech-bubble][pbottom]::before{
          top: calc(100% - 2px);
        }
        [speech-bubble][pbottom][aleft]::before{
          left: 1rem;
          clip-path: polygon(25% 0, 100% 0, 0% 100%)
        }
        [speech-bubble][pbottom][acenter]::before{
          left: calc(50% - var(--width) / 2);
          clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
        }
        [speech-bubble][pbottom][aright]::before{
          right: 1rem;
          clip-path: polygon(0 0, 75% 0, 100% 100%)
        }
        
        /* top */
        [speech-bubble][ptop]::before{
          bottom: calc(100% - 2px);
        }
        [speech-bubble][ptop][aleft]::before{
          left: var(--bbPadding);
          clip-path: polygon(0 0, 100% 100%, 25% 100%)
        }
        [speech-bubble][ptop][acenter]::before{
          left: calc(50% - var(--width) / 2);
          clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
        }
        [speech-bubble][ptop][aright]::before{
          right: var(--bbPadding);
          clip-path: polygon(0 100%, 100% 0, 75% 100%)
        }
        
        /* left and right  */
        [speech-bubble][pleft]::before,
        [speech-bubble][pright]::before{
          --height: calc(var(--bbArrowSize) / 2 * 3);
          width: var(--bbArrowSize);
          height: var(--height);
        }
        
        /* right */
        [speech-bubble][pright]::before{
          left: calc(100% - 2px);
        }
        [speech-bubble][pright][atop]::before{
          top: var(--bbPadding);
          clip-path: polygon(100% 0, 0 100%, 0 25%)
        }
        [speech-bubble][pright][acenter]::before{
          top: calc(50% - var(--height) / 2);
          clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
        }
        [speech-bubble][pright][abottom]::before{
          bottom: var(--bbPadding);
          clip-path: polygon(0 0, 100% 100%, 0 75%)
        }
        
        /* left */
        [speech-bubble][pleft]::before{
          right: calc(100% - 2px);
        }
        [speech-bubble][pleft][atop]::before{
          top: var(--bbPadding);
          clip-path: polygon(0 0, 100% 25%, 100% 100%)
        }
        [speech-bubble][pleft][acenter]::before{
          top: calc(50% - var(--height) / 2);
          clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
        }
        [speech-bubble][pleft][abottom]::before{
          bottom: var(--bbPadding);
          clip-path: polygon(0 100%, 100% 0, 100% 75%)
        }
        
        
        
        
        
        
        
        /* for demo */
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          cursor: default
        }
        body{
          max-width: 60rem;
          margin-inline: auto;
          font-family: sans-serif;
          display:grid;
          grid-template-areas:
            'br bc bl'
            'rb cc lb'
            'rc cc lc'
            'rt cc lt'
            'tr tc tl';
          padding: 2rem;
          gap: 2rem;
          background: #141518;
        }
        
        .middle{
          grid-area: cc;
          align-self: center;
          justify-self: center;
          text-align:center;
          color: white;
        }
        
        [speech-bubble][pbottom][alef.........完整代码请登录后点击上方下载按钮下载查看