1回答
所以我想要一个像这样的div结构。
______________________________________
| \ |
| \ |
| \ |
| Div A \ Div B |
| \ |
| \ |
|__
浏览 1提问于2014-03-15得票数 2
3回答
我试图只使用CSS (白色表单)来制作这个表单：
但是我的css正在做一个平行四边形，我只想做一边，它也变形了我的图像，我只想使容器变形，把我的图像和它原来的形式加我的css放在一起。
这是我的html
<div class="header__logo">
<img src="images/logo.jpg" alt="Skihouse">
</div>
我的css：
.header__logo {
-webkit-transform: skew(20deg);
-moz-t
浏览 4提问于2015-06-11得票数 3
回答已采纳
1回答
我试图设计一个边缘形状的div与css3像一个边方，但倾斜从右手侧到一定程度上.
以下是我的设计：-
我试图通过css3 transformation来倾斜div，但是它也扭曲了div中的映射和内容，并且倾斜了div的两边。
我的演示：-
HTML代码：-
<div class="map_canvas">
<div class="map_area" data-showcontrols="true" data-lat="-34.397" data-lng="150.644" data-z
浏览 2提问于2013-08-24得票数 0
回答已采纳
我按照以下步骤创建了一个ASP.NET MVC4应用程序：。所有东西都在使用默认样式。然后，我修改了_Layout.cshtml页面，删除了我认为没有必要的内容，并添加了一些引导程序。它非常适合主页--显示项目列表的页面(从数据库中)，但是创建、编辑、删除和显示页面(自动生成)以及我尝试创建的任何页面，现在都没有用样式进行更新。他们可以看到布局页面，因为文本在那里，但它们没有样式。有趣的是，如果我添加了一个按钮并设置了类，那么它将看起来像引导按钮。我不知道该包括什么代码。知道会是什么吗？
<!DOCTYPE html>
<head>
<meta n
浏览 1提问于2013-12-03得票数 0
回答已采纳
很难用语言来表达我试图实现的目标，所以请查看下面的图片作为示例：
正如你所看到的，我正在寻找创建一个带有图案背景的倾斜div (简单)，但另一部分，倾斜是半遮盖的部分，也必须有一个背景图像。我想了很多不同的想法，并尝试使用背景剪辑，背景原点，在div和CSS三角形之前和之后的作品。有没有办法在纯CSS中做到这一点？我喜欢在这里不必将图像组合成一个或进行任何photoshopping。
浏览 8提问于2013-03-14得票数 2
我的网站上有一张背景图片。我想把它倾斜，让它看起来像Netflix / Disney Plus上的封面照片(附在下面)。
尝试
我试着将这个添加到我的图像的CSS中，灵感来自这个问题：
transform: rotateY(-30deg) rotateX(40deg) perspective(800px) scale(1.6)
然而，它并没有产生预期的结果。相反，它不正确地倾斜，并且不能完全拉伸容器。
代码示例
下面是我的示例：
截图
更新
我将perspective: 2000px添加到包含的div中，并将以下内容添加到内部div中，从而使其正常工作：
transform
浏览 18提问于2021-06-08得票数 2
1回答
在画布上绘制和动画一页书
、、、、
我正在尝试在画布中创建一个div。我想让div的行为像这张照片：。div应该从step1过渡到step5，就像在图像中描述的那样。
这就像有一页书翻阅这个角度，视角和视角。有人能帮我吗？它应该是Html5、css3和任何Jquery。谢谢。
浏览 2提问于2014-01-08得票数 0
回答已采纳
1回答
我正在尝试使用CSS创建一个仅在顶部倾斜的div，并且不会倾斜其中的文本。我希望它只支持CSS的原因是，它是一个响应式设计，需要响应百分比，因为此div的其余部分会随着设备宽度的变化而变化。
下面是我正在尝试实现的一张照片：
到目前为止，我得到的是创建一个倾斜的div，并将其放置在另一个div中，然后使用负边距向上拉它。我这样做有两个问题。第一个问题是，在最小的屏幕收缩(使您的浏览器宽度非常小)，倾斜的div变得比包含div，使它看起来奇怪。另外，这个div覆盖了我在它后面添加的任何文本。
标记：
<aside>
<div id=&#
浏览 72提问于2012-11-28得票数 14
回答已采纳
1回答
我正在尝试使用CSS transform来倾斜引导nav li，我可以做到这一点，但是当我试图反转内部链接上的倾斜时，li倾斜也被反转回来。我也不知道原因。我尝试了这里提到的公认答案：
然而，虽然它似乎可以使用该代码，但它不能使用bootstrap nav ul li。
请参阅问题(忽略此内容)：
更正：
.skew li {
display:inline-block;
transition: background 0.2s;
transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: sk
浏览 0提问于2015-09-19得票数 1
对于我的HTML/CSS类，我被分配做一个网页，并使它响应。其中一个条件是，当屏幕尺寸在移动屏幕上时，我们必须制作一个汉堡包风格的菜单。
好吧，我想出了所有的东西，除了如何使菜单下拉菜单的项目点击(可能不可能只是css，所以:活动或:悬停就可以了)。我们不允许使用任何JavaScript。
我想知道如何在IMG悬停/活动时将list display属性更改为块。
相关HTML部分：
<div class="nav">
<img id="hamburger" src="img/hamburger.png" alt=
浏览 2提问于2017-03-08得票数 0
回答已采纳
1回答
我愿意创造一些具体的东西，像这样：
用背景色表示背景图像。
我的方法是创建一个通用的div，子div充当图像所在的div的父母，并旋转它们(普通div的每个父div子).With，一个在-11 div和11 div之间的随机旋转，以及它各自在图像div上的负旋转，以对抗它的父旋转。我遇到的主要问题是，为了这个目的，我使用绝对位置，并且我失去了将我的图像包装在它的父div中的能力。
我使用jquery在正或负的程度上旋转每个奇数和偶数div，并在图像上反对它的旋转。
我需要知道是否有办法实现这一设计，如果有，看灯在末端的tunel，因为我被困在这几天.
谢谢大家:D
我现在的总体结构是：
浏览 0提问于2015-08-03得票数 0
回答已采纳
2回答
半倾斜div边框
、、、
我有一个div，我需要它在顶部和底部有一个倾斜的边框，在左边和right.Also上有一个笔直的边框，边角应该是圆形的。我不知道我是否解释清楚了。
<div class="container">
<div class="content">
</div>
</div>
CSS部分如下所示：
.container {-moz-transform:rotate(-1deg); border-radius:25px; border:solid 0 gray; border-width:2px 0;}
.conten
浏览 1提问于2011-10-17得票数 1
回答已采纳
我想要这样的结构：
但是我是用我的html和css代码得到的：
下面是我正在使用的HTML代码：
<section>
<div class="row footer-top">
<div class="container">
<div class="copyright">
<p class="text-center copy-text">2018</p>
</div>
浏览 2提问于2017-07-12得票数 0
回答已采纳
使用修改后的技术，我成功地为我正在开发的网站制作了倾斜的、响应性的div。我遇到的问题是，在每个页面上都有3个倾斜的divs，它们要创建一条对角线(因此每个倾斜的div都需要与页面周围的斜线正确地对齐)。对这些div使用百分比宽度到目前为止还没有起作用，但我不确定还可以尝试什么。
一个很好的解决方案应该是响应性的，最好是只使用css。
*{
margin: 0;
padding:0;
}
.hero{
width: 100%;
position: relative;
border: 1px solid black;
background-co
浏览 3提问于2014-11-05得票数 8
回答已采纳
1回答
角圆菜单CSS和jQuery
、、、、
我正在尝试创建一个角圆菜单，如下图所示：
这就是我尝试并取得的成果：
$(".menu").click(function(){
$(".menu-items").fadeToggle();
});
html,body{
color:#000;
}
.menu{
position:fixed;
left:-100px;
top:-100px;
z-index:9999 !important;
width:200px;
height:200px;
border-radius:50%;
background-color:#3F
浏览 6提问于2016-07-17得票数 3
回答已采纳
我正在为图像创建扭曲的掩膜容器。
我遇到的问题是，使用引导程序将图像填充到响应式布局中。
我尝试使用css属性背景图像并设置background-size: cover;，但是背景图像会与容器倾斜。
我将尝试在容器内设置一个图像，并设置容器的中心/匹配高度和宽度。
请看一下我的小提琴。
编辑
我找到了一个，它几乎可以满足我的需要，尽管我需要调整容器的额外高度和宽度，这是由于倾斜造成的。
更新Fiddle
<div class="profile">
<div class="image"></div>
浏览 2提问于2013-09-05得票数 1
2回答
我想让网站的顶部像这张图片：
第一栏应该有颜色-1。第二列应该有颜色-2在这些列之间应该有角度。
所以我就这样做了：
这里是代码
<section class="topbar">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 left">
<p>Welcome to Remote Auto Diagnostics</
浏览 0提问于2018-07-10得票数 1
回答已采纳
我正试图在一个包含谷歌地图的div上有一个倾斜的一面。如下所示：
为此，我使用了使用CSS的斜转换。然而，它偏斜了div的两面。地图是这样的：
我的CSS：
#ez-map {
min-height: 150px;
min-width: 150px;
height: 420px;
width: 100%;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
我的HTML：
<div id=
浏览 0提问于2018-04-20得票数 0
回答已采纳
3回答
我尝试了不同的方法，但是我找不到任何方法通过HTML，CSS来做这样的事情。现在我有：
HTML：
<div id="intro-slogan">
<div id="diagonal"></div>
</div>
CSS：
#intro-slogan{
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
}
#diagonal{
background: red;
width: 1
浏览 4提问于2016-02-26得票数 3
回答已采纳
1回答
倾斜悬停图像
、、、
我要求对此代码进行检查，以确定我是否遵循了常见的最佳实践，或者是否有更好的方法来完成为该代码设定的目标。
我的目的是创建一个图像，以尽可能接近语义的方法将CSS3 rotateY()定位到鼠标的位置，并将其扩展到任意大小。
我的方法是一个简单的Div->Img标记结构，div的大小间接地是图像的大小，这是由于JS中的侦听器被附加到div的设计限制(因此旋转对大小的影响不会影响图像的周围)。
总之，如果我能得到一些批评，我会非常感激。感谢您的阅读!
活版
HTML index.html
<!DOCTYPE html>
<html lang="en">
浏览 0提问于2018-02-06得票数 3
回答已采纳
1回答
我需要帮助，在创建对角线div，如图片所示。我有对角线设计，三角形在右上和左下角使用绝对定位和z指数。这个div将是包含内容的主div。我需要做一个和图片类似的div。我尝试使用transform斜交属性，但这没有帮助。任何帮助都是有价值的。div会有这样的东西
<div class="tr-corner"><img src="tr.png"></div>
<div class="main">
<div class="content">
Blah blah blah
&l
浏览 1提问于2014-03-03得票数 1
回答已采纳
我是CSS的新手。在我用选择器做的一次练习中，我无意中发现了这样的规则：
* .someclass { someproperty: somevalue }
我也花了几个小时想办法解决这个问题。
我知道CSS选择器中的askerisk意味着页面中的每个元素。我知道这种选择器
something1 something2是指包含在something1中的something2
这种选择器* .someclass是否意味着类的每个元素都包含在页面的另一个元素中？因为这个示例中的情况似乎是这样的，其中span中的文本只有在包含在div中的时才被选中(并显示)。
#expand-toggle {
浏览 0提问于2021-06-02得票数 0
1回答
我有一张原始图像，我想用两个不同的角度在两个方向上旋转(如下所示)。
如果css转换可以简单地添加为rotateZ(90deg)和rotateY(180deg)，我会得到我想要的。
div{
transform: rotateZ(90deg) rotateY(180deg);
}
有什么方法可以实现这种转变吗？
浏览 15提问于2017-02-03得票数 0
我试着做一个倾斜的角度div，但我不能使它响应，当屏幕变大时布局完全中断
这是我到目前为止一直在做的事情：
/* SCSS */
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slantedDivA{
position: relative;
width: 100%;
height: 400px;
background: rgba(40, 40, 40, 1);
box-sizing: border-box;
color: #fff;
}
.conta
浏览 22提问于2017-08-31得票数 0
回答已采纳
1回答
倾斜容器CSS中的纯背景图像
、、、、
我正在尝试创建一个旋转的容器，它可以接受背景图像。
问题是，我试图保持原始图像的比例，这样图像就不会倾斜，而只会被裁剪。
这是我设置的小提琴：
HTML：
<div id="container" class="color-container">
<p>Colored Container</p>
</div>
<div class="sep"></div><div class="sep"&
浏览 1提问于2015-05-14得票数 0
1回答
我想要做一个垂直的分割屏幕，像我所附的图像一样，它有一个定制的形状。
但是它必须是跨浏览器支持的。我尝试使用剪裁路径，但这在FireFox中不受支持，所以我尝试使用CSS transform，但是我的背景也改变了，我不想这样做。另外，我想知道我这样做是正确的方式，还是有更好的方法。请建议一下。
演示 https://jsfiddle.net/cyber007/8yyrv33q/或https://codepen.io/pagol/pen/qXqZJM
<div class="section hpanel leftpan">
<div class="
浏览 1提问于2017-08-04得票数 2
我试图创建一个角的组件，这就像一张A4纸。
当用户输入内容时，当我只将div的最小高度设置为29.7cm时，本文就会进行扩展。
注意:这个元素只使用一个div。为每个页面添加多个div块会破坏用户编辑时页面之间的内容流。。
当用户每隔27.9cm输入内容时，我想在底部显示一个页码。页码应该是div中不可编辑的内容。
对于纯html和CSS解决方案，这是可能的吗？或者只有一个新的角度分量才有可能？
元素看起来是这样的。
提前谢谢。
StackBlitz
预期的论文是这样的。
注意红色的页码。
当用户进一步输入时，当再次到达29.7cm时，元素将再次将页码3添加到页面的末尾。
浏览 0提问于2019-03-28得票数 0
我有两个div标签和一个锚标签。现在第一个div，我只想在div的右边变换，第二个div，我想只在左边变换。锚标签，我想要它转换左右两侧的倾斜(请参考附加的图像)。
我的html代码是：
<div class="box box1"></div>
<div class="box box2"></div>
<a class="theanchor" href="index.html" target="_blank">Home</a>
我的css代码是
浏览 2提问于2014-09-04得票数 1
1回答
当窗口大小调整函数被触发时，我正在尝试用jquery制作全屏图像。但是我得到了这样的结果--你可以在图像的底部看到一个缺口，我不知道如何修复它。
基本的html，
<!-- container -->
<div id="container" class="container">
<div class="holder-supersize" id="supersize">
<ul class="background-supe
浏览 1提问于2012-09-21得票数 0
1回答
在一个角度上掩蔽一个图像
、、、
我做的手风琴应该有倾斜的元素，我已经使手风琴的功能工作，但我正在努力创造倾斜的效果，我有一个。
这也是我的密码
<div id="accordion">
<div class="set" id="first" data-width="261">
<div class="accord">
<img src="http://placekitten.com/872/690" />
</div>
&l
浏览 2提问于2013-01-11得票数 1
1回答
是否可以只使用html和css来设计在图像中显示的内容？
如果是，怎么做？
如果没有，还有什么可供选择的？
创建透明的图像与两个彩色角，并将它作为背景图像，以div持有文本是我的想法。有什么更好的方法吗？
我喜欢使用html和css，因为这样它就会变得比使用图像更灵活。
我添加了我尝试过的代码。请查收。得到了想要的输出。但我想知道是否可以作出改善？
<style>
#rules
{
width:200px;
height:100px;
}
#rules .top, #rules .bottom
{
width:200px;
height
浏览 3提问于2014-05-08得票数 0
回答已采纳
1回答
我的代码为我提供了 ? CSS代码： .about-best-big-vector-right {
width: 1380px;
float: right;
border-top: 140px solid #272838;
border-left: 75px solid transparent;
position: relative;
outline: 3px solid #eda225;
outline-offset: .3rem;
-moz-outline-radius-bottomleft: 2em;
} 超文本标记语言代码：<div
浏览 52提问于2021-02-09得票数 2
回答已采纳
2回答
当我将鼠标移到一个纯html/css站点上时：https://unruffled-shaw-39b759.netlify.app/ CSS在此链接中- https://unruffled-shaw-39b759.netlify.app/css/style.css 我有两行奇怪的代码，如下所示 ? 如何摆脱它？
浏览 29提问于2021-10-30得票数 1
回答已采纳
1回答
我已经搜索了几天的代码，以使一个div倾斜45度的右侧。下面是一个我特别想要得到的图像.
似乎有很多的例子‘倾斜边缘’div，但我找不到任何与特定的右方倾斜。
我花了很多时间试图改变其他人的密码，但结果却是一团糟。
这是我试验的CSS代码，以获得我需要的结果.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div
浏览 0提问于2017-06-22得票数 4
回答已采纳
你好，看看这张我试图通过html和css模仿的comp的图片。
顶部的div是一个白色背景的常规div。底部的div将有一个背景视频。
html结构很简单，如下所示：
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4&
浏览 0提问于2016-11-22得票数 0
我想通过平面(真)背景图像创建一个平行四边形对象。
HTML：
<div class="q-item"></div>
CSS：
.q-item {
width: 180px;
height: 132px;
background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 13px 1px;
float: left;
margin-left: 58px;
padding-right: 1%;
border: 2
浏览 4提问于2014-09-29得票数 1
回答已采纳
我试图使用CSS复制一个设计，下面是一个简化的例子：
粉红背景应为50%不透明度，而蓝色偏移阴影/边框应为100%不透明度。
我可以做一般的形状，但不能在某种方式上达到期望的透明度。
以下是我所做的一个尝试：
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 200px;
}
.content-wrap {
position: relative;
z-index: 1;
filter: drop-shadow(13px 15px 0 rgb(0,255,255
浏览 9提问于2022-09-11得票数 2
回答已采纳
我有一个非常简单的嵌套<div>布局：
<div id="main">
<div id="options">
<a href="#">option 1</a> |
<a href="#">option 2</a>
</div>
</div>
我应用了一个非常简单的CSS：
#main{
height:50px;
background-color: #cc00ff
}
浏览 1提问于2011-10-17得票数 2
回答已采纳
1回答
我正在尝试开发一个拖放功能。可下垂的div由CSS转换。可拖动的div不会落在显示的盒子上，它只会落在盒子的左边和中间，但不会落在盒子的右边。
下面是页面代码的一个简单版本，外加一个jsFiddle：
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("span")
.h
浏览 0提问于2016-06-30得票数 2
回答已采纳
1回答
所以我需要为一个网站实现这一点，但我有困难给图像正确的形状，粉红和蓝色的背景。我需要它的响应，但现在所有的css表单失去了它的形式，当我尝试它在较小的屏幕。
目前我的代码是这样，任何帮助都将非常感谢，谢谢您提前。
who {
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 3vw;
font-weight: 400;
color: white;
margin-top: -9.5%;
m
浏览 4提问于2017-04-12得票数 0
嗨，所以我尝试了一些css的新概念，我绕过了多边形函数，并考虑在网页中实现，所以我做到了，一切都很好，但是当我在里面添加文本时，我超出了期望的形状，它的颜色或字体没有变化。我想看看我们通过使用边距-外部功能得到了什么，谁能帮我一下吗？
<section id="side1">
<div class="leftbox"></div>
<div class="rightbox">
<h2>Welcome</h2><br>
浏览 0提问于2019-01-16得票数 1
回答已采纳
正常状态：
悬停状态：
伙计们，这可能很琐碎，但我找不到这种“琐碎”的来源。正如您从图像链接中看到的，我尝试在那里创建一个下拉菜单。遗憾的是，每次我将触发器悬停在下拉菜单上时，菜单不是下拉，而是水平显示，并与主菜单集成在一起。
这是我的简化html (我只使用home、about和benchmark。关于的下拉触发器)
<div class="header">
<div id="navbar">
<ul id="nav" >
<li class=&#
浏览 0提问于2013-01-15得票数 1
回答已采纳
1回答
我想知道如何在CSS3中实现这一点
我想知道如何使div一边更大，另一边更小，但同时内容又不受影响。
我尝试了prespective:300；它给出了所需的部分效果，但内容仍然受到影响，负值无法修复它。
有什么解决方案吗？
浏览 1提问于2013-06-12得票数 0
我可以在javascript中拉伸文本吗？我不想要更大的字体，因为这会让它看起来比旁边的小文本更粗体，我只想垂直拉伸文本，这样它就会变形。这将是一个div id，然后它旁边的普通文本将是另一个div id。有什么想法吗？
谢谢，-Matthew
注意:我最初在CSS部分问了这个问题，所有人都可以通过设置间距负值来建议水平拉伸。
浏览 4提问于2011-06-15得票数 2
2回答
使用画布定位
、、、
我试着做一个像图片一样的布局，但我在画布定位上苦苦挣扎。我怎样才能把h1提出来呢？另外，什么是更好的黑色和白色倾斜矩形？用CSS或在第一个画布上的另一个画布来完成它们？此外，我将感谢一些关于这个布局的响应性的建议。 body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-siz
浏览 16提问于2020-06-29得票数 0
2回答
这两个div之间的间隔是什么？我甚至删除了html中的空格。
<div id="asd"></div><div id="psd"></div>
现在，如果第一个div (asd)中有一些文本，空格就消失了；什么？
<div id="asd">a</div><div id="psd"></div>
(我正在尝试理解)
CSS
#asd {
background-color: blue;
display: inline-bloc
浏览 0提问于2015-03-20得票数 0
2回答
我已经尝试了所有的一切，使这个文本适合使用CSS透视图的框。但它根本不适合任何形式。
我现在的代码是：
<img src="./img/parcel.png" width="350px">
<div class="centerparcel">
Text on Box Here
</div>
.centerparcel：
position: absolute;
top: 65%;
left: 37.5%;
width: 285px;
font-size: 25px;
vertical-align: top;
tr
浏览 0提问于2018-04-10得票数 0
回答已采纳
1回答
未加载的动态css文件
、、、、
在head部分的_Host.cshtml中有：
@{
var css = "~/css/mycss.min.css";
<link rel="stylesheet" href="@css">
}
上面没有加载css文件。如果我这样做了(为了测试目的)，以下内容可以很好地工作：
@{
<link rel="stylesheet" href="~/css/mycss.min.css">
}
为什么在第一种情况下没有加载该文件？
浏览 7提问于2022-07-28得票数 0
1回答
屏幕中间的CSS斜线
、、、
我试图在屏幕中间得到一条斜线，当你将一个部分悬停在屏幕中间时，它应该会长出来(我猜我会知道怎么做)。
问题是让斜线在屏幕的中心，并使它的响应。
这是我目前的代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS slicing!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
浏览 0提问于2017-07-11得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
