css样式实现：搜索框的样式为平行四边形

最新推荐文章于 2024-02-27 10:49:44 发布

weixin_44353999

最新推荐文章于 2024-02-27 10:49:44 发布

阅读量337

点赞数

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44353999/article/details/121854639

版权

前端专栏收录该内容

6 篇文章 2 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平行四边形搜索框</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body {
            background: url(/images/qionghai.png) no-repeat;
            background-size: 100%;
        }
        .input-group {
            margin:160px 1050px;
            width: 500px;
        }
        .input-group-ipt {
            position: relative; /*关键 */
            display: inline-block;
            padding: 2px 0;
            width: 300px;
            text-align: center;
        }
        .input-group-ipt::before {
            content: '';
            position: absolute; /*关键 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1; /*若效果不显示，就在第一个relative属性加上一个更高的层级（z-index:1）*/
            border:1px solid #FF6600;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 4px;
            transform: skew(23deg); /*旋转的角度 */
            background-color: rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 10px rgb(52 152 68 / 35%);
        }
        .ipt {
            width: 290px;
            height: 39px;
            border: 0px; /*去除input边框 */
            outline: none; /*去除当点击input框时显示的边框 */
            padding: 0px 10px;
            background: transparent; /*背景色为透明色 */
            color: #555;
        }
        .btn {
            position: absolute; /*关键 */
            padding: 8px 11px 9px 10px;
            width:50px;
            height:43px;
            border: 0px;
            outline: none;
            box-shadow: none!important; 
            transform: skewX(23deg);
            background-image: linear-gradient(to top, #FF6600 0%, #FF6600 100%);
            border-bottom-right-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <form action="" target="_blank" method="post">
            <div class="input-group-ipt">
                <input class="ipt" type="text" placeholder="请输入内容"/>
            </div>
            <span class="input-group-btn">
                <button class="btn" type="submit">
                    <img src="/images/20211202112638676.png" style="transform: skewX(-23deg);" alt="">
                </button>
            </span>
        </form>
    </div>
</body>
</html>

【用css实现带边框的平行四边形效果】

参考：css样式实现：带边框的平行四边形_zuo-yiran的博客-CSDN博客_css边框平行四边形

【z-index属性无效时的解决办法】

参考：div层调整z-index属性无效原因分析及解决方法_乌云大帝的博客-CSDN博客_div z-index 无效

weixin_44353999

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式实现：搜索框的样式为平行四边形

效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫