几种css小技巧

1、画三角形

//html
<div class="box">
	<div class="box-inner">
		<div class="triangle bottom"></div>
		<div class="triangle right"></div>
		<div class="triangle top"></div>
		<div class="triangle left"></div>
	</div>
</div>

//css
.triangle{
	display:inline-block;
	margin-right:10px;
	border:solid 10px transparent;
}
.triangle.bottom{
	border-top-color:#0097a7;
}
.triangle.top{
	border-top-color:#00bcd4;
}
.triangle.left{
	border-top-color:#0097a7;
}
.triangle.right{
	border-top-color:#00bcd4;
}

2、画小箭头

//html
<div class="box">
	<div class="box-inner">
		<div class="arrow bottom"></div>
		<div class="arrow right"></div>
		<div class="arrow top"></div>
		<div class="arrow left"></div>
	</div>
</div>

//css
.arrow{
	display:inline-block;
	margin-right:10px;
	width:0;
	height:0;
	border:16px solid;
	border-color:transparent;
	position:relative;
}
.arrow:after{
	content:"";
	position:absolute;
	right:-20px;
	top:-16px;
	border:16px solid;
	border-color:transparent;
}
.arrow.bottom{
	transform:rotate(270deg);
}
.arrow.top{
	transform:rotate(90deg);
}
.arrow.left{
	transform:rotate(180deg);
}
.arrow.right{
	transform:rotate(0deg);
}

3、图片自适应

//html
<div class="box">
	<div class="img-container">
		<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt=""/>
	</div>
</div>
<div class="box">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

<div class="box-vw">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

.box, .box-vw{
  background-color: #f5f6f9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.box:nth-of-type(2){
  width: 260px;
}
/* vw方案 */
.box-vw .img-container{
  width: 100vw;
  height: 66.620879vw;
  padding-bottom: inherit;
}
/* padding方案 */
.img-container{
  width: 100%;
  height: 0;
  /* 图片的高宽比 */
  padding-bottom: 66.620879%;
}

img{
width: 100%;
}

4、多行文本溢出显示省略号

//html
<p class="more-line-ellipsis">上帝对人都是公平的给了你丑外表--也会配给你低智商 如果你愿意一层一层剥开我的心，你会发现--我缺心眼啊！</p>

//css
.more-line-ellipsis{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}

5、使用filter:grayscale(1)使网页呈现哀悼模式

body{
  filter: grayscale(1);
}

6、修改input中的placeholder样式

<input type="text" placeholder="请输入用户名搜索">

.placehoder-custom::-webkit-input-placeholder{
  color: #babbc1;
  font-size: 12px;
}