带对象的 CSS 转换-6ren

带对象的 CSS 转换

转载作者：行者123 更新时间：2023-11-28 13:05:23

我有一个关于 CSS 转换的问题。我做了一个下拉菜单，其中的下拉菜单(子菜单)应该有一个特殊的形状。看这里: https://drive.google.com/folderview?id=0B5Ki_dh4A-VJY2ZKQUJaQnF5SDQ&usp=sharing

到目前为止，我可以通过以下方式管理它的一部分:transform: skewY。我如何才能完成如上图所示的其余部分？

这是我的 JSFiddle:http://jsfiddle.net/sxfxs/

有人有想法吗？

这是我的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>MENUTEST</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style>
        #menu {
            font-family: TrajanProRegular;
            position: absolute;
            top:100px;
            width: 1100px;
            height: 70px;
            background-color: #484441;
            color: #8C8985;
            font-weight: bold;
            clear: both;
            text-align: center;
            vertical-align: middle;
            line-height: 70px;
            display: inline-block;
        }

        nav {
            width: 1100px;
            height: 70px;
            background: #484441;
            line-height: 70px;
            position: absolute;
        }

        nav span {
            font: 1.35em 'TrajanProRegular';
        }

        nav a {
            text-decoration: none;
        }

        nav ul {
            text-align: center;
            margin-top: -1px;
            display: inline-block;
        }


        ul li {
            font: 9px  'PT Sans Narrow';
            cursor: pointer;
            -webkit-transition: padding .05s linear;
            -moz-transition: padding .05s linear;
            -ms-transition: padding .05s linear;
            -o-transition: padding .05s linear;
            transition: padding .05s linear;
        }
        ul li.drop {
            position: relative;
        /*        float: left;*/
        }
        ul > li {
               display: inline-block;
               letter-spacing: 0.11em;
               padding: 0 10px 0;
        }
        ul li a {
            line-height: 70px;
            padding: 0 10px;
            height: 70px;
            color: #8C8985;
            font: 1.3em/70px TrajanProRegular;
            /* font: 10pt/70px TrajanProBold; */
            -webkit-transition: all .1s ease-out;
            -moz-transition: all .1s ease-out;
            -ms-transition: all .1s ease-out;
            -o-transition: all .1s ease-out;
            transition: all .1s ease-out;
            border-left: 1px solid #777370;
            border-right: 1px solid #777370;
        }
        ul li a:hover {
            color: #eee;
        }

        .dropOut .triangle {
            width: 0;
            height: 0;
            position: absolute;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #239976;
            top: -8px;
            left: 50%;
            margin-left: -8px;
        }
        .dropdownContain {
            width: 160px;
            position: absolute;
            z-index: 2;
            left: 50%;
            margin-left: -80px; /* half of width */
            top: -400px;
        }
        .dropOut {
            width: 185px;
            background: #239976;
            float: left;
            position: relative;
            margin-top: 0px;
            opacity: 0;
            -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
            -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
            box-shadow: 0 1px 6px rgba(0,0,0,.15);
            -webkit-transition: all .1s ease-out;
            -moz-transition: all .1s ease-out;
            -ms-transition: all .1s ease-out;
            -o-transition: all .1s ease-out;
            transition: all .1s ease-out;
           -webkit-transform: skewY(3deg);
           -moz-transform: skewY(3deg);
           -ms-transform: skewY(3deg);
           -o-transform: skewY(3deg);
           transform: skewY(3deg);
        }

        .dropOut ul {
            float: left;
            padding: 10px 0;
            -webkit-transform: skewY(-3deg);
            -moz-transform: skewY(-3deg);
            -ms-transform: skewY(-3deg);
            -o-transform: skewY(-3deg);
            transform: skewY(-3deg);
        }

        .dropOutb {
            width: 185px;
            background: #239976;
            float: left;
            position: relative;
            margin-top: 0px;
            opacity: 0;
            -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
            -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
            box-shadow: 0 1px 6px rgba(0,0,0,.15);
            -webkit-transition: all .1s ease-out;
            -moz-transition: all .1s ease-out;
            -ms-transition: all .1s ease-out;
            -o-transition: all .1s ease-out;
            transition: all .1s ease-out;
            z-index: -1;
        }

        .dropOut ul li {
            text-align: left;
            float: left;
            width: 150px;
            /* padding: 12px 0 10px 15px; */
            margin: 0px 3px;
            color: #FFF;
           /* -webkit-border-radius: 4px;
            * -moz-border-radius: 4px;
            * border-radius: 4px;
            */
            -webkit-transition: background .1s ease-out;
            -moz-transition: background .1s ease-out;
            -ms-transition: background .1s ease-out;
            -o-transition: background .1s ease-out;
        }
        /* NEW */
        .dropOut ul li a{
            font: 12px 'PT Sans Narrow';
            border: none !important;
            /* padding: 5px 0 10px 0px !important; */
            text-align: left;
            width: 160px !important;
            margin: 0px 5px 0px 0px !important;
            padding: 5px 0 10px 0px !important;
            float: left;
            height: 15px !important;
            -webkit-transition: padding .05s linear;
            -moz-transition: padding .05s linear;
            -ms-transition: padding .05s linear;
            -o-transition: padding .05s linear;
            transition: padding .05s linear;
        }


        .dropOut ul li:hover {
            /* background: #CCE5DB; */
            /* text-shadow: 2px 2px 2px #FFFFFF; */
            /* filter:DropShadow(Color=#fffff, OffX=2, OffY=2); */
        }
        .dropOut ul li:hover a {
            color: #ACD6C6;
        }

        ul li:hover a { color: white; }
        ul li:hover .dropdownContain { top: 65px; }
        ul li:hover .underline { border-bottom-color: #777; }
        ul li:hover .dropOut { opacity: 1; margin-top: 0px; }
       </style>
   </head>
   <body>
       <div id="menu">
           <nav>
               <ul>
                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu1</a>
                       <div class="dropdownContain">
                           <div class="dropOut dropOutb">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#">T1Sub1</a></li>
                                   <li><a href="#">T1Sub2</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->

                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu2</a>
                       <div class="dropdownContain">
                           <div class="dropOut dropOutb">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#">Topmenu2sub1</a></li>
                                   <li><a href="#">Topmenu2sub2</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->

                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu3</a>
                       <div class="dropdownContain">
                           <div class="dropOut">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#">TOPmenu3Sub1</a></li>
                                   <li><a href="#">TOPmenu3Sub2</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->

                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu4</a>
                       <div class="dropdownContain">
                           <div class="dropOut">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#" target="contLiFrame">TOPmenu4Sub1</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu4Sub2</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu4Sub3</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu4Sub4</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->

                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu5</a>
                       <div class="dropdownContain">
                           <div class="dropOut">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#" target="contLiFrame">TOPmenu5Sub1</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu5Sub2</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu5Sub3</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu5Sub4</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu5Sub5</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->

                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu6</a>
                       <div class="dropdownContain">
                           <div class="dropOut">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#">TOPmenu6Sub1</a></li>
                                   <li><a href="kontakt.html">TOPmenu6Sub2</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->

                   <li class="drop">
                       <a href="#"><span>T</span>OPmenu7</a>
                       <div class="dropdownContain">
                           <div class="dropOut">
                               <!--<div class="triangle"></div>-->
                               <ul>
                                   <li><a href="#" target="contLiFrame">TOPmenu7Sub1</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu7Sub2</a></li>
                                   <li><a href="#" target="contLiFrame">TOPmenu7Sub3</a></li>
                               </ul>
                           </div> <!-- dropOut -->
                       </div> <!-- dropdownContain -->
                   </li> <!-- drop -->
               </ul>
           </nav>               
       </div><!-- menu -->
    </body>
</html>

最佳答案

一种方法是将以下内容添加到 .dropOut ul

background: #239976;
margin-bottom: -10px;
margin-top: 10px;

http://jsfiddle.net/myajouri/sxfxs/1/

关于带对象的 CSS 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20401326/

文章推荐： ios - 如何调用这个完成处理程序？

文章推荐： php - 如何在 php 中的新页面上开始新报告

文章推荐： ios - 在没有时间范围的情况下以编程方式关闭 UIAlertview

文章推荐： ios - 支持 iOS6 到 9 的后台位置更新

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

带对象的 CSS 转换