使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）

本文链接：https://blog.youkuaiyun.com/qq_35788269/article/details/80308038

使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）

今天呢，博主带领小伙伴们使用纯碎的CSS制作一个多拉A梦，对，你没看错，，陪伴我们童年的蓝胖子！233

要实现多拉A梦的制作，首先我们需要了解一下CSS画图的基本知识！为了引起小伙伴的兴趣！先来看下多拉A梦制作效果图把！

怎么样？是不是超级可爱，2333.我们的蓝胖子，，，，

第一,三角形的实现：

原理：在css盒子模型之中，当一个盒子的两条边在边角处相交的时候，浏览器就会在交点按照某个角度（如果盒子是正方形的，则为顺时针45° 135° 225° 315°）绘制出一条接合线！这个时候，我们把盒子的宽度高度都设置为0，在把border-color某个方向的属性保留，其他方向隐藏，这样就可以得到对应方向的三角形了！

代码：

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
 
  #box{ 
 
 
  width: 
  0px; 
 
 
  height: 
  0px; 
 
 
  border: 
  20px; 
 
 
  border-style: 
  solid; 
 
 
  border-color: 
  red 
  transparent 
  transparent 
  transparent ; 
 

   } 
 
 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "box" 
  > 
 

 
  </ 
  div 
  > 
 
 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

第二个：学习圆角的应用，这里博主不再废话了，直接贴代码，主要是border-radius的用法，下面是制作一个QQ对话气泡的代码！2333

QQ对话气泡代码：

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  #wrapper{ 
 
  display: 
  inline-block; 
 
  position: 
  relative; 
 
  padding: 
  20px 
  30px; 
 
  margin-top: 
  100px; 
 
  border: 
  1px 
  solid 
  red; 
 
  border-radius: 
  10px; 
  /*半径为10像素，添加圆角效果*/ 
 
  font-size: 
  14px; 
 
  font-weight: 
  bold; 
 
  text-align: 
  center; 
 
  background-color: 
  aquamarine; 
 
   } 
 
  #triangle{ 
 
  position: 
  absolute; 
 
  left: 
  50%; 
 
  margin-left: 
  -15px; 
 
  width: 
  0; 
 
  height: 
  0; 
 
  border-width: 
  15px; 
 
  border-style: 
  solid; 
 
  border-color: 
  transparent 
  transparent 
  red 
  transparent; 
 
  margin-top: 
  -50px; 
 
   } 
 
  #triangle div{ 
 
  position: 
  absolute; 
 
  top: 
  -13px; 
 
  left: 
  -14px; 
 
  width: 
  0; 
 
  height: 
  0; 
 
  border-width: 
  14px; 
 
  border-style: 
  solid; 
 
  border-color: 
  transparent 
  transparent 
  aquamarine 
  transparent; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id= 
  "wrapper" 
  > 
 
  < 
  div 
  id= 
  "triangle" 
  > 
 
  < 
  div 
  ></ 
  div 
  > 
 
  </ 
  div 
  > 
 
   欢迎来到qq_35788269的博客 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
</html>
我们来贴下qq对话气泡的代码效果：