css 的对角线文本框边框样式
Diagonal Textbox border styling by css
任何人都可以帮助我像图片中那样设置文本框边框的样式吗 css.I 已经尝试了以下 css 但效果不佳
.addfolder-input {
border: medium none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 100%;
padding: 0 10px;
border-top: 0;
border-right: 0;
border-bottom: solid 2px #3c5a9a;
border-left: 0;
border-radius:5px;
}
这是一种可能的方法,它在文本框周围使用一个容器元素,然后向容器中添加一个绝对定位的伪元素,该容器沿 X 轴旋转并具有一定的透视性。
当我们从矩形的底部到顶部时,使用透视图沿 X 轴旋转使矩形看起来好像它的边彼此远离。伪元素的上边框被取消了,因为我们不需要它。
文本框需要的任何内容 width
都应设置为容器,因为伪元素和文本框都从其容器派生其宽度 (100%)。
.addfolder-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 100%;
padding: 0 10px;
border: none;
outline: none;
}
.container {
position: relative;
width: 100px;
}
.container:after {
position: absolute;
content: '';
bottom: 48%;
left: 6px;
width: 100%;
height: 6px;
border: 2px solid #3c5a9a;
border-top: none;
-webkit-transform: perspective(10px) rotateX(-10deg);
-moz-transform: perspective(10px) rotateX(-10deg);
transform: perspective(10px) rotateX(-10deg);
}
<div class="container">
<input type="text" class="addfolder-input" value="Type Something..."/>
</div>
这是另一个使用多重背景、线性渐变和背景定位的替代方法。这也可以工作,但在某些浏览器中 angular edges/borders 变得有点参差不齐。
.addfolder-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 85%;
padding: 0 10px;
border: none;
outline: none;
position: relative;
left: 6px;
}
.container {
position: relative;
width: 120px;
}
.container:after {
position: absolute;
content: '';
bottom: 48%;
left: 6px;
width: 100%;
height: 6px;
background: -webkit-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(-45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(0deg, transparent 9%, #3c5a9a 9%, #3c5a9a 95%, transparent 11%) no-repeat;
background: -moz-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -moz-linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), -moz-linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
background: linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
background-position: 0px 6px, 107px 6px, 0px 4px;
}
<div class="container">
<input type="text" class="addfolder-input" value="Type Something..." />
</div>
任何人都可以帮助我像图片中那样设置文本框边框的样式吗 css.I 已经尝试了以下 css 但效果不佳
.addfolder-input {
border: medium none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 100%;
padding: 0 10px;
border-top: 0;
border-right: 0;
border-bottom: solid 2px #3c5a9a;
border-left: 0;
border-radius:5px;
}
这是一种可能的方法,它在文本框周围使用一个容器元素,然后向容器中添加一个绝对定位的伪元素,该容器沿 X 轴旋转并具有一定的透视性。
当我们从矩形的底部到顶部时,使用透视图沿 X 轴旋转使矩形看起来好像它的边彼此远离。伪元素的上边框被取消了,因为我们不需要它。
文本框需要的任何内容 width
都应设置为容器,因为伪元素和文本框都从其容器派生其宽度 (100%)。
.addfolder-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 100%;
padding: 0 10px;
border: none;
outline: none;
}
.container {
position: relative;
width: 100px;
}
.container:after {
position: absolute;
content: '';
bottom: 48%;
left: 6px;
width: 100%;
height: 6px;
border: 2px solid #3c5a9a;
border-top: none;
-webkit-transform: perspective(10px) rotateX(-10deg);
-moz-transform: perspective(10px) rotateX(-10deg);
transform: perspective(10px) rotateX(-10deg);
}
<div class="container">
<input type="text" class="addfolder-input" value="Type Something..."/>
</div>
这是另一个使用多重背景、线性渐变和背景定位的替代方法。这也可以工作,但在某些浏览器中 angular edges/borders 变得有点参差不齐。
.addfolder-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 85%;
padding: 0 10px;
border: none;
outline: none;
position: relative;
left: 6px;
}
.container {
position: relative;
width: 120px;
}
.container:after {
position: absolute;
content: '';
bottom: 48%;
left: 6px;
width: 100%;
height: 6px;
background: -webkit-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(-45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(0deg, transparent 9%, #3c5a9a 9%, #3c5a9a 95%, transparent 11%) no-repeat;
background: -moz-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -moz-linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), -moz-linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
background: linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
background-position: 0px 6px, 107px 6px, 0px 4px;
}
<div class="container">
<input type="text" class="addfolder-input" value="Type Something..." />
</div>