相关疑难解决方法(0)

如何创建包含IMG的DIV,其中DIV将图像切割成三角形,从而仅通过三角形显示图像的一部分.

所以..

<div>
   <img src='some_image' />
</div>

图像是正方形,但包含图像的DIV是三角形. http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/解决了这个问题,除了这个解决方案不是x浏览器友好(非ie).

http://css3pie.com/看起来很有趣,但这依赖于PHP.

我试图在顶部网站上创建一个正方形的div并流入三角形,

方形部分不是那么难,并且工作正常,但三角形部分有点难.盒子需要改变大小与屏幕尺寸,在广场我这样做通过使用宽度和高度%,但我不能使用边框属性中的%符号

我现在的代码

HTML

 <div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div> 

CSS

div.menuItem 
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}

div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}

div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;    
}

JavaScript用于设置类:我这样做是因为我使用parralax库并且想要在某个高度上将"按钮"设置为"活动"

我希望有人可以帮我(也许还有其他人)解决这个问题

jsfiddle 示例 …

我正试图在最后创建一个三角形的横幅.

.wrapper {
  padding: 50px;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 20px solid gray;
  border-bottom: 20px solid gray;
  border-right: none;
}

<div class="wrapper">TEXT HERE</div>

这是我的设置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
span {
  padding-left: 25px;
  background: red;
}

<span></span>

我有设置为box-sizing:border-box和的 span 标签padding-left:25px。当这个span标签中没有任何值时，它的height和width是0。所以我希望span标签不会显示在网页上。但是，它仍然存在，我认为这是因为 padding-left 的原因。但我只设置了padding-left所以它仍然没有高度可显示。但是正如你在jsfiddle中看到的，padding显示在网页上......

为什么会发生这种情况？

我想使用基本的CSS在HTML页面中创建三角形.我正在使用需要时间加载的三角形图片,因此,我想减少页面的加载时间.

我正在尝试在我的网站上制作一个带有2个大按钮的启动页面,每个按钮都是一个直角三角形,并且都是通过最长边连接来创建一个正方形.基本上我想找出如何在CSS中制作非矩形按钮.

我不知道这是否甚至是可能的,并且无法在网上找到任何解释类似技术的按钮,这些按钮不是矩形的,而且我不是特别熟练的CSS.向正确的方向推进将非常有帮助!

我最近发现，可以使用纯CSS来创建三角形，使用宽度和高度为0的div上的border属性。尽管使用css做到这一点非常简单，但我对如何使左边框和右边框透明如何使箭头向上充满好奇？

据我所知，当我们将border-bottom设置为10px并使其左右边界时，它应该变成一个矩形而不是一个三角形，并且其边沿是透明的。

请说明其运作方式。我确定我错了，但对澄清感到好奇。

考虑以下形状:

1. 灰色区域是外部容器.无视那个.
2. 白色区域是链接(a标记).
3. 红色三角形区域是另一个链接(a标记).

我使用以下代码为红色区域创建了一个CSS三角形:

.ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    border-left: 60px solid transparent;
    border-bottom: 60px solid red;
}

问题是在下图中,链接不会在红色三角形中保持其边界.绿色三角形也可点击:

问题是:
如何将红色区域链接到一个位置,将白色链接到另一个位置,而不让浏览器计算第二个插图中的绿色区域作为红色区域的一部分？

我有这个CSS三角形:

http://codepen.io/orweinberger/pen/myEoVa

码:

*,
*:before,
*:after {
  box-sizing: border-box;
}
.triangle {
  position:absolute;
  bottom:0;
  right:0;
  display: inline-block;
  vertical-align: middle;
}
.triangle-0 {
  width: 200px;
  height: 200px;
  border-bottom: solid 100px rgb(85,85,85);
  border-right: solid 100px rgb(85,85,85);
  border-left: solid 100px transparent;
  border-top: solid 100px transparent;
}

.text {
  color:#fff;
  position:absolute;
  bottom:0;
  right:0;
}

是否可以在其中一个边缘添加阴影,类似于此？

http://codepen.io/orweinberger/pen/ByzbKX

我可以更改内容可编辑div中的插入符号颜色.
光标颜色总是与文本颜色相同,在我的情况下是红色.所以我的问题是有没有办法将插入颜色改为黑色？例如caret-color:black HTML:

<div class="red" contenteditable="true"> hello </div>

CSS:

.red{
   color:red;
  }

检查此链接