css三角形文本框

CSS三角形文本框是常用的一种样式，可以让文本框呈现出三角形的形状，增加设计的美感。下面我们将介绍如何使用CSS制作三角形文本框。

 <div class="triangle">
    <p>这是一个三角形文本框</p>
  </div> 

首先，需要准备一个文本框容器，并设置其class为triangle。然后在容器内部添加一个p标签，以便向文本框中添加文本。

 .triangle {
    position: relative;
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: #f1f1f1;
    margin: 20px auto;
  } 

接下来在样式表中设置triangle的一些样式，如其宽度、高度、背景色等属性。

 .triangle:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #f1f1f1 transparent transparent;
  } 

使用:before伪元素在triangle容器前添加一个三角形，通过设置其边框的颜色、宽度、样式，达到三角形的效果。其中，将右侧边框颜色设置为文本框的背景色，就可以隐藏三角形右侧的边框。

 .triangle:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #f1f1f1;
  } 

再使用:after伪元素在triangle容器后添加另一个三角形，实现三角形文本框的左侧效果。

使用上述代码，就可以轻松制作一个三角形文本框。需要注意的是，该方法并不兼容IE浏览器，需自行解决。