- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
这是我的 code到目前为止:
我有一个父 div 和另一个旋转 6 度的 div。
父 div 的 CSS 是:
#side-left {
background: #f5f5f5;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
和旋转的三 Angular 形:
.solid-triangle {
background: #c9dee2;
border-left: 3px solid black;
position: absolute;
height: 110%;
width: 145px;
top: -10px;
right: 0;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
transform-origin: left bottom;
}
基本上,我希望黑色边框的顶部位于父 div 的右上角,如下所示:
我可以通过调整右侧的绝对定位(当前为 0)来使其对齐,但是当父 div 的高度发生变化时(由于在右侧添加更多/更少的文本),值会变得困惑).
我见过一些 90 度旋转的 jQuery 解决方案,但没有一个适用于我的 6 度旋转。
最佳答案
我已经为你整理好了。
您的变换原点颠倒了,您想要右上角而不是左下角。
并从 0px
向左更改为 -145px
https://jsfiddle.net/nkqsnmwm/3/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#main-wrap {
clear: both;
overflow: hidden;
position: relative;
}
#side-right {
width: 50%;
float: right;
padding-left: 20px;
}
#side-left {
background: #f5f5f5;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.solid-triangle {
background: #c9dee2;
border-left: 3px solid black;
position: absolute;
height: 110%;
width: 145px;
top: -10px;
right: -145px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
transform-origin: top right;
}
<div id="main-wrap">
<div id="side-left">
<div class="solid-triangle"></div>
</div>
<div id="side-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tincidunt magna, vitae iaculis erat. Sed vel risus dolor. Sed dictum convallis luctus. Nulla ac odio placerat, molestie ante maximus, malesuada ipsum. Proin pharetra imperdiet
metus ut vestibulum. Phasellus pharetra, tellus sit amet viverra ultrices, sapien tellus lobortis nisi, nec placerat nisl purus nec lacus. Sed neque risus, fringilla ac elit ac, placerat porttitor nisl. Donec nec facilisis nulla, in iaculis justo.
Fusce in mi eros. Sed semper felis rhoncus, sodales purus sed, semper massa. Morbi laoreet, purus non dignissim aliquet, ante nulla malesuada ligula, dignissim finibus nulla tortor vel ex. Nullam quis efficitur libero. Sed pellentesque sodales lacinia.
Donec vitae faucibus purus, sed luctus lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tincidunt magna, vitae iaculis erat. Sed vel risus dolor. Sed dictum convallis luctus. Nulla ac odio placerat, molestie ante maximus,
malesuada ipsum. Proin pharetra imperdiet metus ut vestibulum. Phasellus pharetra, tellus sit amet viverra ultrices, sapien tellus lobortis nisi, nec placerat nisl purus nec lacus. Sed neque risus, fringilla ac elit ac, placerat porttitor nisl.
Donec nec facilisis nulla, in iaculis justo. Fusce in mi eros. Sed semper felis rhoncus, sodales purus sed, semper massa. Morbi laoreet, purus non dignissim aliquet, ante nulla malesuada ligula, dignissim finibus nulla tortor vel ex. Nullam quis
efficitur libero. Sed pellentesque sodales lacinia. Donec vitae faucibus purus, sed luctus lacus.</p>
<p>Aliquam lacinia sagittis dolor, a consequat felis blandit in. Praesent at orci mi. Nunc imperdiet semper rhoncus. In lectus ipsum, scelerisque vel nulla nec, auctor bibendum lectus. Pellentesque dictum purus diam, et vulputate eros varius vel. Nunc
tempor nisi a tellus ornare feugiat. Sed dignissim, turpis sed mollis fermentum, purus eros vestibulum nulla, at viverra neque dui sit amet metus. Donec euismod libero luctus diam imperdiet, a vulputate arcu malesuada. Proin tincidunt aliquam dui,
nec efficitur nisi laoreet ac. Proin faucibus, purus eget aliquet pretium, est ex dapibus massa, ut malesuada lectus dolor sit amet ante. Morbi volutpat enim vel ex tempor imperdiet. Phasellus pretium felis non libero accumsan, sed ultricies nulla
iaculis.</p>
<p>Morbi ac sagittis nunc. Aliquam erat volutpat. Ut nulla ante, efficitur eu tincidunt a, vestibulum sit amet urna. Vestibulum tristique aliquam lacus vitae consectetur. Mauris euismod velit sit amet orci commodo, in consectetur urna rutrum. Duis ut
turpis ac lacus accumsan tincidunt vitae eget tortor. Curabitur lacinia nibh mattis lacinia varius. Quisque posuere felis eget mollis sagittis. Vestibulum lacinia volutpat leo ac dignissim. Pellentesque sodales metus at massa malesuada vulputate.
Sed vehicula magna ut sapien sodales suscipit. Praesent dictum convallis diam, sed faucibus felis rutrum quis. Morbi convallis rutrum dui et varius. Vestibulum dapibus imperdiet dolor, at sollicitudin risus accumsan in.</p>
</div>
</div>
关于javascript - 绝对定位旋转 div 的 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30215266/
我想要做的是在每个框的蓝色标题之后获取红色文本。 看来我必须添加另一个 div?我已经添加并修改了 .card-indus img 的位置,但结果永远不是我想要的。 你知道为什么即使我将 positi
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题,我已尽力理解它们。除了这一点,我大部分时间都很好。我正在创建一个页面,其中有较小的缩略图图像,用户可以选择单击并展开图像。为此,
下面是我正在处理的代码。如您所见,有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度,这是因为有时,'#child' 的高度小于或长于它的父级
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧,小按钮始终位于
我怎样才能得到一个绝对定位的子 div,当它放在父 div 的范围之外时不显示? https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
如果我对 CSS 显得相当“菜鸟”,我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
很长一段时间以来,我一直在摆弄一个特定的布局问题,但我显然采用了错误的方式。 以下是分解为基本组成部分的方法: SOME HEADER
我创建了几个虚拟 Controller ,我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我创建了几个虚拟 Controller ,我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
所以我是 django 的新手,我一直在研究 PHP CodeIgniter,其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数 它给出的输出类
我有一个小问题。 我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中,但我不能使用顶部:-healfHeight; mar
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常,当
我正在尝试设置一个卡住列,唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的,它可以跨越多行。 如果它不是绝对定位的,那么这将迫使同一行中
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
当它的位置绝对时,我试图使一个框宽度为 100%? 下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我有 3 个 div,都是 positioned: absolute,但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。 我知道这听起来很菜
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。 有时候,当我请求某个对象的.posit
我是一名优秀的程序员,十分优秀!