美文网首页让前端飞前端教程技术干货
小Tip:有三角的指示框阴影实现

小Tip:有三角的指示框阴影实现

作者: 不二很纯洁 | 来源:发表于2018-07-18 18:38 被阅读3次
有三角的指示阴影框

利用css3滤镜 drop-shadow

直接上代码:

<!DOCTYPE html>
<html>
<head>
<style>
.box{
    width:200px;
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));
}
.jiao{
    height: 0px;
    width: 0px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    margin: 0 auto;
}
.con{
    width:200px;
    height:200px;
    background: #fff;
    border-radius: 5px;
}
</style>
</head>
<body>
    <div class="box">
        <div class="jiao"></div>
        <div class="con"></div>
    </div>
</body>
</html>

相关文章

  • 小Tip:有三角的指示框阴影实现

    利用css3滤镜 drop-shadow 直接上代码:

  • Flutter初识

    小TIP 这里有个小 Tip ,当代码框里输入 stl 的时候,可以自动弹出创建无状态控件的模板选项,而输入 st...

  • css实现下拉框带阴影的小三角型

    需求: 下拉框带有阴影的小三角型html: css: 效果图:

  • 辅助类

    情境文本颜色 情境背景色 关闭按钮 通过使用一个象征关闭的图标,可以让模态框和警告框消失 三角符号 指示某个元素具...

  • css实现三角形

    工作中经常遇到一些tip提示,tip提示会有一个小三角形,我们可以使用图片或者iconfont实现,当然最高级的还...

  • 用CSS3制作带box-shaodow阴影的三角的对话框

    一个三角带有阴影,用到的知识点transform,box-shaodw 效果: 那么接下来制作一个带阴影的对话框:...

  • 提示框阴影三角

    效果: 代码:

  • 随手记

    Tips Tip1:float会使元素生成块级框Tip2:inline-block元素向下对齐Tip3:JavaS...

  • 用css写一个对话框

    要实现的对话框效果首先分析一下对话框的组成:大致可以分两部分,左边的矩形和右边的三角形。矩形实现起来简单,那么三角...

  • CSS 实体三角箭头

    实体三角箭头可以有很明显的元素间关系指示功能,如下图是简书网页中将鼠标放置在导航栏中的分享按钮上出现的效果,红色框...

网友评论

    本文标题:小Tip:有三角的指示框阴影实现

    本文链接:https://www.haomeiwen.com/subject/bgdapftx.html