相关疑难解决方法(0)

如何从左下角到右上角创建动态对角线?

我创建了一个简单的布局,其中有三个div相互作用.一个是屏幕中间的徽标,另一个是两个块,jQuery被移出屏幕.我使用skewCSS中的选项来应用学位转换.我想根据屏幕应用一定程度,所以这个学位将适用于所有屏幕.

可视化示例:http://jsfiddle.net/6a93T/1/

现在我有这个代码:

HTML:

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jq.animation.js"></script>
    </header>
    <body>
        <div id="preloader">
            <div id="blocktop"></div>
            <div id="logo"></div>
            <div id="loadline"></div>
            <div id="blockbottom"></div>
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

html{
    overflow: hidden;
}


#preloader{
    width: 100%;
    height: 100%;
}

#logo{
    background-image: url('../img/logotest.png');
    width: 300px;
    height: 300px;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 1000;
}


#blocktop{
    background-color: #fff4ed;
    width: 100%;
    height: 100%; …
Run Code Online (Sandbox Code Playgroud)

javascript jquery dynamic diagonal responsive-design

8
推荐指数
2
解决办法
9085
查看次数

仅使用CSS创建三角形

我正在开发一个响应式Web应用程序,需要创建两个单独的内容区域,如下所示, 参考图像

到目前为止,我试过,

border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c; 
height: 100%;
width: 100%;
position: fixed;
Run Code Online (Sandbox Code Playgroud)

但是,遗憾的是无法创建一个三角形.

有没有其他方法可以使用CSS创建一个三角形,除了使用border属性之外还可以将内容完全包装在div中?

任何帮助将不胜感激.

html css svg css3 css-shapes

5
推荐指数
1
解决办法
1025
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

diagonal ×1

dynamic ×1

html ×1

javascript ×1

jquery ×1

responsive-design ×1

svg ×1