css具有倾斜效果的横条

快乐打工仔 分类:实例代码

此效果可以用作导航栏的背景,在左边缘具有倾斜效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.inner {
  height: 45px;
  width: 100%;
  background-color: #0072c9;
}
.inner_l {
  float: left;
  height: 45px;
  width: 227px;
  background-color: #fff;
}
.triangle_topleft {
  float: left;
  width: 0;
  height: 0;
  border-top: 45px solid red;
  border-right: 45px solid transparent;
}
.triangle_bottomright {
  float: left;
  margin-left: -28px;
  width: 0;
  height: 0;
  border-bottom: 45px solid red;
  border-left: 45px solid transparent;
}
.center_square {
  float: left;
  width: 120px;
  height: 45px;
  background-color: #f00;
}
</style>
</head>
<body>
<div class="inner">
  <div class="inner_l">
    <div class="triangle_topleft"></div>
    <div class="triangle_bottomright"></div>
    <div class="center_square"></div>
    <div class="triangle_topleft" style="border-right:45px solid #0072c9"></div>
  </div>
</div>
</body>
</html>
css具有倾斜效果的横条

回复

我来回复
  • 暂无回复内容