常用CSS样式

正方形加三角阴影效果

div{
    width: 200px;
    margin: 200px 0;
    height: 200px;
    background: #dfb311;
    position: relative;
    border-radius: 10px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
div::after {
    content: '';
    display: inline-block;
    border: 20px solid #dfb311;
    border-color: transparent transparent transparent #dfb311;
    position: absolute;
    right: -40px;
    top: calc(50% - 20px);
}
阴影.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、文字超出部分显示省略号 单行文本的溢出显示省略号(一定要有宽度) 多行文本溢出显示省略号 2、中英文自动换行 ...
    源大侠阅读 903评论 0 0
  • 1. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值设为auto即可 2. 容器垂直居中 比如...
    irenb阅读 530评论 0 0
  • ●暗夜风格:E:/wjm/能耗监测管理系统/能耗监测网页pc版v2暗色版/index_night_layer.ht...
    流都阅读 190评论 0 0
  • 标签(空格分隔): CSS3 前端 技术胖 面试题 渐进增强和优雅降级 答:渐进增强是先满足大部分浏览器;优雅降级...
    爱吃胡萝卜的小白兔阅读 310评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,676评论 0 8