css具有傾斜效果的橫條

admin發表於2017-04-07
CSS

此效果可以用作導航欄的背景，在左邊緣具有傾斜效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章