跳到主要内容

Css

2023年03月01日
柏拉文
越努力，越幸运

一、梯形​

1.1 等腰梯形​

实现思路: 通过边框原理实现。内容区 width 给一个宽度值作为梯形的上边; 左右两边边框长度值+内容区宽度值作为梯形的下边,且左右两边边框颜色透明; 作为梯形下边的边框给一个颜色值,并且它的长度作为梯形的高度

实时编辑器
function Test(props) {
const trapezoid = {
    width: "400px",
    height: "0px",
    borderLeft: "100px solid transparent",
    borderRight: "100px solid transparent",
    borderBottom: "200px solid #e5c3b2",
}
return (
    <div style={ trapezoid }></div>
);
}
结果
Loading...

1.2 直角梯形​

实时编辑器
function Test(props) {
const trapezoid = {
    width: "260px",
    height: "0px",
    borderLeft: "100px solid transparent",
    borderBottom: "200px solid #e5c3b2",
}
return (
    <div style={ trapezoid }></div>
);
}
结果
Loading...

二、扇形​

实现思路: 用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90°的扇形

实时编辑器
function Test(props) {
  const sector = {
    width: 0,
    height: 0,
    border: "100px solid transparent",
    borderRadius: "100px",
    borderTopColor: "#e5c3b2",
  }
  return (
    <div style={ sector }></div>
  );
}
结果
Loading...

三、菱形​

实时编辑器
function Test(props) {
  const rhomboid = {
    margin: "64px",
    width: "100px",
    height: "100px",
    transform: "rotate(-45deg)",
    backgroundColor: "#E5C3B2"
  }
  return (
    <div style={ rhomboid }></div>
  );
}
结果
Loading...

四、旗帜​

实现思路

实时编辑器
function Test(props) {
  const flag = {
    width:0,
    height:"100px",
    borderLeft: "50px solid red",
    borderRight: "50px solid red",
    borderBottom: "35px solid transparent"
  }
  return (
     <div style={ flag }></div>
  );
}
结果
Loading...

五、爱心​

代码

.shape-heart {
    position: relative;
    width: 100px;
    height: 90px;
}

.shape-heart:before,
.shape-heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.shape-heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

实现

实时编辑器
function Test(props) {
  return (
     <div className="shape-heart"></div>
  );
}
结果
Loading...

六、半圆​

实现思路

实时编辑器
function Test(props) {
  const semicircle = {
    width:"100px",
    height:"50px",
    backgroundColor: "#e5c3b2",
    borderRadius: "100px 100px 0 0"
  }
  return (
     <div style={ semicircle }></div>
  );
}
结果
Loading...

七、椭圆​

实现思路

实时编辑器
function Test(props) {
  const ellipse = {
    width:"200px",
    height:"100px",
    backgroundColor: "#e5c3b2",
    borderRadius: "200px / 100px"
  }
  return (
     <div style={ ellipse }></div>
  );
}
结果
Loading...

八、三角形​

实现思路: 盒子元素内容区 width 和 height 变为 0 之后, 整个盒子大小由四个 border 撑起。此时,内容区相当于一个四个三角形的顶点。所以, 每一个 border 是由三角形组成的。因此,可以通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度和边长。

  • 上三角形

    实时编辑器
    function Test(props) {
  const triangle = {
    width: 0,
    height: 0,
    borderTop: "100px solid #e5c3b2",
    borderLeft: "100px solid transparent",
    borderRight: "100px solid transparent",
  }
  return (
    <div style={ triangle }></div>
  );
}
    结果
    Loading...

  • 下三角形

    实时编辑器
    function Test(props) {
  const triangle = {
    width: 0,
    height: 0,
    borderBottom: "100px solid #e5c3b2",
    borderLeft: "100px solid transparent",
    borderRight: "100px solid transparent",
  }
  return (
    <div style={ triangle }></div>
  );
}
    结果
    Loading...

  • 左三角形

    实时编辑器
    function Test(props) {
 const triangle = {
   width: 0,
   height: 0,
   borderLeft: "100px solid #e5c3b2",
   borderTop: "100px solid transparent",
   borderBottom: "100px solid transparent",
 }
 return (
   <div style={ triangle }></div>
 );
}
    结果
    Loading...

  • 右三角形

    实时编辑器
    function Test(props) {
 const triangle = {
   width: 0,
   height: 0,
   borderRight: "100px solid #e5c3b2",
   borderTop: "100px solid transparent",
   borderBottom: "100px solid transparent",
 }
 return (
   <div style={ triangle }></div>
 );
}
    结果
    Loading...

  • 上右三角形

    实时编辑器
    function Test(props) {
  const triangle = {
    width: 0,
    height: 0,
    borderTop: "100px solid #e5c3b2",
    borderRight: "100px solid transparent",
  }
  return (
    <div style={ triangle }></div>
  );
}
    结果
    Loading...

  • 下右三角形

    实时编辑器
    function Test(props) {
  const triangle = {
    width: 0,
    height: 0,
    borderBottom: "100px solid #e5c3b2",
    borderRight: "100px solid transparent",
  }
  return (
    <div style={ triangle }></div>
  );
}
    结果
    Loading...

九、五边形​

代码

.shape-pentagon {
    position: relative;
    width: 54px;
    box-sizing: content-box;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}

.shape-pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

实现

实时编辑器
function Test(props) {
  return (
     <div className="shape-pentagon"></div>
  );
}
结果
Loading...

十、六边形​

代码

.shape-hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}

.shape-hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}

.shape-hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

实现

实时编辑器
function Test(props) {
  return (
     <div className="shape-hexagon"></div>
  );
}
结果
Loading...

十一、五角星​

实现

实时编辑器
function Test(props) {
  return (
     <div className="shape-five-pointed-star"></div>
  );
}
结果
Loading...

十二、无穷大​

代码

.shape-infinity {
    position: relative;
    width: 212px;
    height: 100px;
    box-sizing: content-box;
}

.shape-infinity:before,
.shape-infinity:after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 20px solid red;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
}

.shape-infinity:after {
    left: auto;
    right: 0;
    border-radius: 50px 50px 50px 0;
    transform: rotate(45deg);
}

实现

实时编辑器
function Test(props) {
  return (
     <div className="shape-infinity"></div>
  );
}
结果
Loading...

十三、对话气泡​

代码

.shape-speechBubble {
    width: 120px;
    height: 80px;
    background: red;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.shape-speechBubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
}

实现

实时编辑器
function Test(props) {
  return (
     <div className="shape-speechBubble"></div>
  );
}
结果
Loading...

十四、平行四边形​

实时编辑器
function Test(props) {
  const rhomboid = {
    width: "100px",
    height: "70px",
    transform: "skew(20deg)",
    backgroundColor: "#E5C3B2"
  }
  return (
    <div style={ rhomboid }></div>
  );
}
结果
Loading...

参考资料​