ichuan.net

自信打不死的心态活到老

css triangle setp by step

The Markup

<h2>case1</h2>
<div id="case1"></div>

<h2>case2</h2>
<div id="case2"></div>

<h2>case3</h2>
<div id="case3"></div>

<h2>case4</h2>
<div id="case4"></div>

The CSS

div {
    margin-bottom: 40px;
}

#case1 {
  width: 50px;
  height: 50px;
  border-width: 50px;
  border-style: solid;
  border-color: blue green yellow red;
}

#case2 {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: blue green yellow red;
}

#case3 {
  width: 0;
  height: 0;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue green yellow red;
}

#case4 {
  width: 0;
  height: 0;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue transparent;
}

and the rendered HTML

enter image description here

Comments