热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用CSS制作评论形状

如何解决《如何使用CSS制作评论形状》经验,为你挑选了1个好方法。

是否可以使用CSS代码制作下面显示的形状?

我尝试了一些东西,但我做不到,所以我需要一些帮助.

在此输入图像描述

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;
}
#demo:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #333;
  top: 100%;
  left: 50%;
  margin-left: -10px;
}



1> Weafs.py..:

您可以在:beforeand和:afterpseudo元素上使用两个三角形.

div {
  position: relative;
  width: 100px;
  height: 40px;
  border: 4px solid black;
}
div:after, div:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  bottom: -9px;
  right: 20px;
  border-top: 10px solid white;
  border-right: 2px solid white;
  border-left: 10px solid transparent;
}
div:before {
  bottom: -15px;
  right: 16px;
  border-top: 15px solid black;
  border-right: 4px solid black;
  border-left: 15px solid transparent;
}

推荐阅读
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  • 1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]
  • http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ... [详细]
  • 在DIV内垂直居中UL - Centering Vertically an UL inside a DIV
    iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]
  • 很有意思的全景动画:(直接上代码)html部分:<div><div>css部分:.panorama{width:300px;hei ... [详细]
  • 小编给大家分享一下CSS3如何实现loading预加载动画特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
  • 1.CSS3透明度渐变(从左到右)#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]
  • 这篇文章主要为大家展示了“html5+css3网站菜单的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习 ... [详细]
author-avatar
洪佳蓉名羽明德
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有