原码笔记

原码笔记

CSS 制作带边框背景色透明的消息框

小诸哥 0

写个消息框容易太容易了,网上一搜就一大堆教程。直接拷贝粘贴到自己项目就可以啦。大多是用::after或者::before实现三角形,绝对定位移动到边上成为消息框的角角。

但是如果要我们实现背景色是透明的消息框,如下:

似乎常用的消息框写法这种操作是实现不了的。

难点一

用常用的方式实现的消息框,想要改成透明背景,似乎不太可能。

因为如果消息框有边框的话,消息框的角通常是用::after 与 ::before 做成三角形,然后一大点的三角形与小一点的三角形重叠而成,如果我们想要把消息框的角变成透明的,总会透到后面作为是模拟边框的三角形的颜色。

(如上图我把作为背景三角形设置了 opacity: .5 透的是作为边框的颜色,两个颜色混合在了一起)

难点二

还有一个问题就是消息框的角透明会透到消息框的边框线。

如何实现

好了,接下来说说我是如何实现的。

消息框的角还有另一种实现方法就是就是写个小正方形旋转45度。

然后给正方形上边和右边边框

然后再给个透明背景色 background: hsla(0, 0, 0, 0);

好了一个可以透明到背景的角实现了我们再来解决难题二。

想写个消息框的主体

好,然后用主体div的::after 和 ::before 实现左边和右边的边框,中间隔开要放三角形的位置

然后给主体div设置下边框

哈哈 是不是解决了难题二。

最终效果

调下绝对定位的位置,调下z-index。

好了接下啦,铠甲合体!!!

详细代码

  1. <div class="warp" >
  2.      <div class="box" >
  3.          <div class="horn" ></div>
  4.          <div class="content">低调哥挺帅</div>
  5.      </div>
  6. </div>
  7.  
  8. .warp{
  9.      margin: auto;
  10.      width: 75%;
  11.      height: 100vh;
  12.      z-index: 1;
  13.      position: relative;
  14. }
  15. .box{
  16.      overflow: hidden;
  17.      .horn{
  18.          right: .75rem;
  19.          top: .18rem;
  20.          position: absolute;
  21.          transform: rotate(45deg);
  22.          width: .25rem;
  23.          height: .25rem;
  24.          border-width: 0.02rem 0rem 0rem 0.02rem;
  25.          border-style: solid;
  26.          border-color:#fff;
  27.          background: #000;
  28.          background: hsla(0, 0, 0, 0);
  29.      }
  30.      .content{
  31.          display: none;
  32.          position: relative;
  33.          margin: .3rem 0 .25rem 0;
  34.          width: auto;
  35.          float: right;
  36.          padding: .1rem .3rem;
  37.          font-size: .3rem;
  38.          color: #fff;
  39.          background: hsla(0, 0, 0, .0);
  40.          letter-spacing: .05rem;
  41.          border-bottom: .02rem solid #fff;
  42.          border-radius:.35rem;
  43.          &::after{
  44.              content:'';
  45.              position: absolute;
  46.              width: 1.305rem;
  47.              height: 103%;
  48.              top:0;
  49.              left: 0;
  50.              border-width: 0.02rem .0rem .02rem .02rem;
  51.              border-style: solid;
  52.              border-color: #fff;
  53.              border-radius: .35rem .0rem 0 .35rem;
  54.          }
  55.          &::before{
  56.              content:'';
  57.              position: absolute;
  58.              width: .71rem;
  59.              height: 103%;
  60.              top:0;
  61.              right:0;
  62.              border-width: 0.02rem .02rem .02rem .0rem;
  63.              border-style: solid;
  64.              border-color: #fff;
  65.              border-radius: 0 .35rem .35rem 0;
  66.          }
  67.      }

总结

以上所述是小编给大家介绍的css 制作带边框背景色透明的消息框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

标签: 背景色