前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

用css实现三角形、聊天对话框(css3实现三角形)



前言

常见的聊天对话框,如微信,都是由一个长方形加一个三角形组合而成,重点就在于三角形的制作


一、css制作三角形的实现原理?

三角形的实现原理是元素宽高设置为0,再设置边框宽度、样式和颜色。
例如:

二、单个三角形

1.原理

只设置一条边的颜色,其他三边颜色设置为透明
例如:

  • 向下三角
  • 向右三角
  • 向上三角
  • 向左三角

2.空心三角形

只能看见边线,内部透明的三角形该如何用css实现呢

实现思路:使用css伪元素定位,用两个不同颜色、不同大小的实心三角形叠加,以达到“空心”的效果

<div class="box"><div>

<style>
.box {
  width: 200px;
  height: 50px;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  border: 1px solid red;
}
.box::before{
  position: absolute;
  top: 15px;
  left: 200px;
  content: '';
  border-width: 10px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: red;
}
.box::after {
  position: absolute;
  top: 15px;
  left: 198.5px;
  content: '';
  border-width: 10px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #fff;
}
</style>

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言