1回答
利用css与滑块连接的三角形
、、、、
我用的是光滑的滑块，想要使滑块三角形成形。尝试使用css3斜
&__shape {
overflow: hidden;
position: absolute;
height: 100%;
transform: skewX(-55.98deg);
transform-origin: 100% 0;
transition: all 1s ease;
width: 100%;
div.is-zoom & {
transform: skewX(0deg);
}
}
见代码
这对于直角三角形很好，
浏览 1提问于2016-12-06得票数 1
回答已采纳
1回答
这是一个真正的css挑战，我认为这是不可能的：
我做了一些白色的css三角形。当你将鼠标悬停在三角形上时，白色三角形应该会在照片中发生变化，照片也会像三角形一样裁剪。我为它做了一个jsfiddle：
感谢您的任何帮助
浏览 6提问于2013-07-14得票数 1
回答已采纳
3回答
我想用CSS创建空心三角形，但我不知道如何空心。我可以用CSS创建三角形，但是我有一个问题，就是:我不能空心这个三角形。
这是我的密码：
HTML:
<div id="tringle"></div>
CSS:
#tringle {
position: absolute;
height: 0;
width: 0;
top: 50%;
left: 7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7
浏览 7提问于2013-09-04得票数 13
回答已采纳
我有一种演讲气泡:圆角的，左边有一个三角形(取决于:nth-child(odd/even))。边框和圆角在border和border-radius中没有问题。但是我希望三角形也是CSS，这样我就可以改变整个东西的边框颜色。当前三角形是两个三角形(左和右)的精灵。
我知道使用CSS (2甚至)：可以实现三角形，但它们看起来都不像。有没有办法让三角形看起来像截图中的那个？我更喜欢只使用:before和:after元素，但如果需要，我可以添加更多元素。
浏览 3提问于2011-09-21得票数 2
回答已采纳
1回答
我已经玩了很长一段时间了，尝试使用嵌入式阴影css3属性来实现这一点。我想将蓝色三角形嵌入到div中，就像我已经看到使用边界css属性完成的外部三角形一样。
有人能告诉我，嵌入阴影的方法是好的，还是我应该使用其他的方式？我怎样才能达到这个效果？使用纯css嵌入三角形？
浏览 3提问于2015-01-18得票数 2
回答已采纳
我试着用HTML和CSS画一个三角形。但我无法成功地做到这一点。 我查找了在CSS中绘制三角形最常见的解决方案。 这是HTML代码： <html>
<head>
<link rel="stylesheet" href="tiangle.css" type="text/css">
</head>
<body>
<div id = 'triangle-up'></div>
</bo
浏览 36提问于2019-05-01得票数 0
2回答
我正在实现一个CSS三角形，但它在右边有空格。我想在三角形的右边显示一些文字。我试过编辑毛边和衬垫，但没有成功。我发现了其他CSS三角形的例子，比如，它的右边也有空格。
有人建议怎么去掉这个吗？
我用了
使用此CSS代码
width: 0px;
height: 0px;
border-style: solid;
border-width: 35px 22.5px 0 22.5px;
border-color: #ff5154 transparent transparent transparent;
下面是示例
浏览 2提问于2014-03-10得票数 0
回答已采纳
我只想用css在上面创建一个正方形和一个三角形，所以
I可以在中编写一些动态文本，在运行时很容易用css动态设置三角形颜色。
浏览 1提问于2012-04-20得票数 0
回答已采纳
使用CSS通过使用'border-width‘参数来创建三角形。
<div id="my-weird-triangle"></div>
<style type="text/css">
#my-weird-triangle{
border-color: blue black black blue;
border-style:solid;
border-width:50px 50px 50px 50px;
width:0;
height
浏览 0提问于2012-02-04得票数 0
回答已采纳
2回答
用css创建框影到三角形
、、、、
我有下面的，其中我使用CSS创建了一个三角形。
CSS:
.triangle {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent red transparent;
border-bottom-style: solid;
position: absolute;
top: 50px;
left: 50px;
z-index: 89;
浏览 0提问于2015-10-19得票数 1
回答已采纳
2回答
我想在css中创建一个元素，像这样：，我希望宽度是100%，但是我希望三角形保持他的宽度(比如30‘s)，即使在一个小屏幕上也要保持中心.
因此，我尝试在css梯度上使用多边形剪辑路径，但是为了保持三角形的中心位置，我必须将值放在%中，但正如您猜的那样，三角形没有保持他30 of的大小。
有人有主意吗？也许创造两个面具，一个长方形和另一个与一个三角形的形象，但它似乎不是很“干净”，我.
( thx ;)
浏览 4提问于2014-10-13得票数 1
回答已采纳
当我在文本上悬停时，我有一些jquery可以移动它旁边的三角形。鼠标操作很好，但是鼠标没有将三角形返回到正常状态。
$(document).ready(function(){
$(".website_logo").mouseenter(function(){
$(".right_triangle").css({
'marginLeft' : "30px"
});
$(".left_triangle").css({
浏览 0提问于2018-04-18得票数 2
回答已采纳
1回答
这里你可以看到一张蓝色三角形的图片。如何使用css来实现这一点。我可以使用背景图像。或者，我如何使用CSS来实现它。转变？三角形在左边的边上。但在右边不是。而且它必须具有响应性。
谢谢
浏览 1提问于2013-12-07得票数 0
1回答
我正在寻找创建三角形网页设计的最佳方法，如下所示：
在这种情况下，必须对三角形内的文本进行换行，三角形将缩进文本，并且这些三角形可以具有背景。
使用CSS (边框技巧)制作三角形似乎确实有效，但在尝试为其设置背景时失败。
使用图像(例如svg)作为div的背景，并指定内部段落的宽度使其看起来像三角形()，这对浏览器兼容性有很坏的影响，当涉及到响应时，这真的很糟糕。
使用一些css3并创建不对称的div似乎是一个很好的选择()，但它可能有点重，并且并不是所有浏览器都支持它(所有新浏览器仍然支持)
transform-origin: 100% 0;
transform: skewX(-5
浏览 1提问于2014-10-25得票数 0
1回答
我正在开发一个反应应用程序。
我使用两个带有后伪元素的css类来添加一个右三角形和一个下三角形。
.triangle-right::after {
content: "\25B6";
font-size: 10px;
}
.triangle-down::after {
content: "\25BC";
font-size: 10px;
}
我从两个三角形过渡，改变元素的类。
<span className={(this.state.isOpen ? 't
浏览 2提问于2018-03-13得票数 2
回答已采纳
1回答
我想在CSS中创建这个三角形。
但它一定是一个流动的三角形。我怎样才能做到这一点，我试着用skewY。但是三角形在元素的位置被打破了。
谢谢你对我的照顾!
浏览 2提问于2013-11-28得票数 0
回答已采纳
2回答
最近我遇到了一个PSD模板，它有一个不寻常的三角形边框。我知道如何使用纯CSS创建三角形，但问题是(出于兴趣)有关这些图像的：
这些是由一个已经像这样剪切的背景创建的，还是我可以使用相同的CSS来完成呢？
浏览 4提问于2015-08-23得票数 1
回答已采纳
2回答
是否可以使用CSS3绘制下面提到的对象？
(三角形的中间、左侧和右侧的三角形在底部有线)。
请给我建议。
浏览 1提问于2014-01-08得票数 3
回答已采纳
有没有办法从BoxDecoration的shape属性创建一个三角形？
如果不是，我必须对Container做什么才能得到一个三角形(最好是等边三角形或等腰三角形)？在CSS中，有一种方法可以通过使用一些透明的边框来做到这一点，我喜欢在Flutter中使用模拟。
浏览 13提问于2019-07-28得票数 0
我正在使用jQuery制作下拉菜单。在每个对象旁边打开一个下拉列表，有一个三角形，如下所示：
我有两个CSS类，.caret和.u-caret。类caret看起来像向下的三角形，而类u-caret看起来像指向上的三角形。当我单击对象时，我希望类切换。
HTML：
<span id="learn">Open Dropdown <span class="caret"></span></span>
CSS：
.caret {
border-top:5px solid black;
bor
浏览 3提问于2015-04-21得票数 1
回答已采纳
3回答
我使用下面的CSS代码创建了一个三角形。
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 60px solid #000;
这个边框的背景颜色是黑色，正如我提到的#000，但现在我需要一个图像在这个三角形内。我尝试添加另一行到CSS的背景图像属性，但这样做是在正方形背景中显示完整的图像，而不是矩形背景。
如何显示包含所需图像的三角形。
浏览 2提问于2012-12-16得票数 0
1回答
塑造纳瓦尔巴的底部边界
、、、
我试图塑造一个导航包装器的底部边框，这样一个三角形就会在它的中间弹出(前)。图片如下)。
有没有办法通过编辑/转换nav包装器的CSS来创建这个形状呢？
三角形具有与导航包装相同的不间断背景模式和底部边框阴影，因此我认为这应该通过CSS转换来完成，而不是在边界上添加CSS/图像形状。
IE：
谢谢!
浏览 1提问于2016-11-10得票数 3
回答已采纳
2回答
我想复制这个验证。
这是我迄今所取得的成就：
我从底部漏掉了那个三角形。我想使用css/css 3来解决这个问题。这是我试过的，但没有成功：
.contact-form .parsley-errors-list .parsley-required:after{
padding: 8px;
background-color:red
margin-top: 1px;
transition: none 0s ease 0s;
position: absolute;
content: "";
left: -6px;
transform: rotate(45deg);
浏览 2提问于2016-01-12得票数 0
回答已采纳
1回答
我正在尝试为浮动的Ext.menu.Menu添加一些样式。具体地说，我希望创建一个菜单，显示在组件下面，并在顶部显示一个小三角形，类似于找到的css语音气泡
我尝试过用css设置菜单的样式，但我无法让三角形与生成的CSS一起显示。我需要重写什么才能正确工作，你有什么想法？
浏览 2提问于2014-02-20得票数 0
2回答
我发现了使用CSS创建三角形的各种例子(比如)；所有这些例子都是基于创建一个0大小的盒子和修改边框来创建三角形形状的。好的，非常好。
但我怎么才能在这样一个三角形里放点东西呢？
浏览 3提问于2014-03-11得票数 0
回答已采纳
4回答
我想使用基本的CSS在HTML页面中制作三角形。我正在使用三角形图片，这需要时间加载，所以，我想减少我的页面的加载时间。
浏览 2提问于2012-09-19得票数 8
我正在尝试构建一个CSS三角形，它可以根据父元素的宽度调整自身的大小。
目前，我已经为我创建的三角形指定了自定义大小，以便在调整大小时，三角形开始位于父对象之外。但我需要三角形在调整大小时留在父对象内部，但要全宽。请帮帮忙。谢谢。
这是我的HTML和CSS。
.triangle-container{
width:50%;
height:200px;
background-color: #000000;
}
.triangle{
width:0;
height:0;
border-left:167px solid rgba(0,0,0,0);
border-rig
浏览 1提问于2015-02-18得票数 3
2回答
我使用的引导带，并有一个肚脐与几个链接。前几个链接有下拉菜单。在每个下拉菜单的顶部，我添加了一个三角形，向上旋转，指向您刚才单击的链接。问题是，链接有不同的长度(品牌与男式手表)，我希望三角形与文字的中心。由于三角形是通过:before属性在dropdown-menu上使用CSS完成的，所以我不知道如何根据li和dropdown类对齐。
我肚脐的启动：
三角形的CSS：
#main_navbar2 .dropdown-menu:before { position: absolute;
top: -10px;
left: 55px;
display: inline-block;
浏览 5提问于2016-09-05得票数 0
回答已采纳
我想在下面的图片中创建一个看起来像红色三角形的三角形：
因此，我尝试了以下css的运气：
HTML：
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
CSS：
.div-1 {
position: absolute;
bottom: 0; left: 0;
border-bottom: 385px
浏览 6提问于2017-06-20得票数 1
回答已采纳
1回答
梯度css3形状
、、、
我有两个带有css的三角形：
三角形左上角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
三角形右上角
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
我的问题是如何将背景梯度添加到这些2三角形中
谢谢。
浏览 4提问于2015-04-10得票数 1
回答已采纳
1回答
我想在css3中得到一个曲边三角形，在css3中可以得到吗？我下面的代码有一个正常的三角形...
#left-triangle {
width: 0;
height: 0;
border-right: 100px solid orange;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
我想要这样..。
浏览 0提问于2012-05-21得票数 2
回答已采纳
2回答
我在react和css中都是新手，我想知道如何为我的应用程序创建一个背景三角形，它带有全宽错误，不会随着页面大小的改变而改变角度。
这是我的实际页面：
这是它附带的css：
diagonaleBottom: {
position: "absolute",
bottom: 0,
width: "100%",
height: "35%",
clipPath: "polygon(100% 100%, 0 100%, 100% 0)",
background: "#0823
浏览 16提问于2020-05-05得票数 0
回答已采纳
2回答
在css中，我可以画一个三角形如下：
.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #48a665 transparent transparent;
}
<div class="triangle"></div>
现在我想画一个底部是圆形的三角形，如下所示：
可以用CSS实现吗？
浏览 3提问于2014-05-02得票数 1
回答已采纳
2回答
我有一个三角形
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid white;
}
考虑到border本身是用来绘制三角形的，我该如何绘制CSS三角形的轮廓？外部div？
浏览 0提问于2015-03-12得票数 23
回答已采纳
2回答
包含文本的CSS三角形
、、、
我手头有一个奇怪的问题，我正在努力寻找解决办法。
我只使用CSS创建了一个三角形<div>“容器”，但我现在想要的是在容器中插入一些文本。
我瞄准的解决方案必须包含在三角形边界内的文本，无论插入多少文本，因为我希望创建缩略图。
一个例子可以找到注释；这个例子非常基本，只显示了我选择的创建三角形的方式。
再往前推一点，我想创建一个三角形，一个朝上，一个朝下，文本必须在每个三角形的底部，所以对于第一个三角形，文本在底部，对于第二个三角形，B是在三角形内垂直和水平地居中。
CSS:
.up {
text-align:right;
width: 0px;
heigh
浏览 6提问于2013-02-27得票数 11
回答已采纳
2回答
我想创建一个三角形(最好使用一个纯CSS方法)，它有两种颜色。三角形可以填充到一定的高度，这必须在网站上动态完成，因为三角形代表设备的速度。我想要实现以下结果：
三角形的黄色部分需要调整。(我不介意使用jQuery修改CSS，但使用图像是行不通的)。我已经成功地使用“边框方法”创建了一个三角形，并且我已经成功地使用背景线性渐变填充了一个正方形，但两者的结合被证明是一个相当大的挑战。
.arrowLeft{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
浏览 0提问于2017-08-18得票数 0
2回答
我正在尝试创建一个三角形的'div‘，我需要输入一些文本和一个覆盖整个'div’的背景图像。
我尝试使用css和jquery (我使用了jquery，所以“三角形元素”总是接触到“三角角”的3个顶点)
结果很好，但“三角形内容”并不在其中居中。
我对“triangular content”应用了逆变换，以便让它不旋转，但之后我不能让它在父元素中居中。
我已经创建了一个代码片段来向您显示问题。
如果你改变页面，你可以看到黄色区域(“三角形内容”)并没有覆盖整个黑色的div (“三角形元素”)。这是一张显示问题的图片：如何将黄色的div居中？
$( window ).read
浏览 2提问于2015-07-16得票数 0
2回答
全屏响应式三角形图案
、、、
最近，我深入研究了移动用户体验设计，发现了一个关于1只手/拇指选择的有趣话题。
主要的想法是，你有两个三角形区域，可以用拇指点击。我确实试图通过CSS或jQuery找到一个解决方案来创建两个可点击/可触摸的三角形区域，但我失败了。
我试过了：
图标字体svg(这不起作用，因为svg仍然是矩形的)带有边框的 fontsjQuery，(效果不是很好)ASCII div在这方面没有什么真正有用的:/旋转的divs (CSS转换)
你有什么建议，我如何才能实现2个响应式三角形，适合屏幕，不重叠，在这个屏幕上，是可点击和访问的DOM？
UI的要点是，用户需要(在视觉上)看到点击/可触摸区域，以便确定交互
浏览 2提问于2014-02-13得票数 8
1回答
带有三角形的砖石网格？
、、、
有没有可能创建一个像Packery这样的砖石网格，但使用通过CSS或SVG完成的三角形？我能够成功地做到这一点，然而，将三角形彼此对齐以便没有间隙似乎是一个挑战。
我有以下几点：
<div id="container">
<div class="item"></div>
<div class="item ud"></div>
<div class="item"></div>
</div>
.item表示一个等边三
浏览 11提问于2015-11-03得票数 3
1回答
如何创建一个CSS三角形(例如)，它只会在三角形的边框内触发悬停事件？
在实践中，它将在游戏中的位置和它上的不同对象，这应该是模糊的，如果我们悬停。
请注意，在此中，span:hover样式在输入元素的矩形边界(而不是三角形)时触发。
浏览 1提问于2013-05-07得票数 7
回答已采纳
我试图在css中创建这个形状：
但我有点不知所措。我现在用这个做了一个三角形：
var resY = $(window).height;
var resX = $(window).width;
$('#slide1-container').css({'border-bottom-width': resY, 'border-left-width': .4*resX});
因为某些原因，百分比/vh/vw没有使用css中的边框宽度(不确定它是否支持？)
我不知道如何使它从三角形->的形状，我已经画了。有什么建议吗？
谢谢你的帮助！-
浏览 3提问于2013-11-27得票数 0
回答已采纳
我尝试使用CSS在包含div中放置一个直角三角形，以便三角形占据包含div的全部高度和宽度。
高度被设置为100px，所以这很容易处理，但是宽度是屏幕宽度的可变(本质上是100%)，我不知道如何让三角形在可变宽度的情况下正确拉伸。
以下基本上是我想要显示在屏幕上的内容：
下面的标记和CSS是我所能得到的最接近的，但是我遇到的问题是你不能对边框宽度做百分比，并且为边框宽度设置100vw没有考虑到垂直滚动条，这会导致红色三角形宽度太宽，从而向站点添加水平滚动条。
HTML：
<div class="container">
<div class=&
浏览 3提问于2020-08-01得票数 1
我使用CSS3属性" resize : both“来允许用户调整我拥有的div的大小。但由于某些原因，您单击并拖动以调整窗口大小的调整三角形被推到div之外，用户几乎看不到它。有没有一种方法可以用CSS定位这个调整大小的三角形，使它在我的窗口的角落里更整齐？
浏览 2提问于2012-07-13得票数 2
回答已采纳
1回答
假设我们有一个三角形：
article {
position: relative;
}
article>.triangle {
position: absolute;
left: 0;
top: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
}
<article>
<div class="triangle"></div>
</ar
浏览 12提问于2018-08-01得票数 1
回答已采纳
3回答
有没有可能在CSS中做这样的事情？我想要一个标题的图像，但我想从下一节中切出那个三角形，以便上面的图像显示在那里。
我知道如何制作一个带有边框的实心CSS三角形(例如：)，但在这种情况下，我需要做相反的事情(从蓝色部分中取出一个“块”)，或者使三角形的图像与它所连接的图像完全对齐。我在想，如果我能拿出一大块，那可能会更容易
为了让它更复杂一点，我还将上面的图像设置为background-attachment: fixed和background-size: cover。因此，随着浏览器大小的增大，图像也会随之缩放。
如果我不能单独使用CSS，并且需要一个图像，如果文本在页面上水平居中，
浏览 1提问于2013-08-22得票数 11
回答已采纳
我试图在css中绘制一个只包含边框的三角形。没有背景色。
.arrow {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 20px solid #000;
height: 0;
width: 0px;
}
上面的代码给了我一个以#000作为背景色的三角形。我只想要三角形边框。
浏览 0提问于2013-12-04得票数 0
我有用CSS3设计的芭蕾舞形状。
这是用三角形做的
:after {
content: "";
}
我需要用修改向左移动三角形，用Jquery左移 css参数。我知道我不能从DOM中选择伪元素，但是还有另一种改变方式吗？
是的，我们可以在里面放另一个div
<div class="pop"><div class="arr"></div></div>
但它很丑
浏览 9提问于2011-10-24得票数 31
1回答
我有一个由菱形和三角形组成的复杂结构图。我能够使用CSS技巧和绝对位置属性创建结构。
我希望每个菱形和三角形都是可点击的，但是考虑到CSS三角形与边框的工作方式，这种行为并不像预期的那样。
在这张图片中，我们有一个菱形和两个三角形，
我想要的：
点击A，B，E-菱形按钮
点击C，点击D-第一三角形(图中编号2)。
取而代之的是：
单击A，什么都不会发生(我怀疑这里的绝对和转换属性)
在单击B时，单击第一个三角形(图中编号2)。这是因为第一个三角形的右边框透明。
在单击C时，单击第二个三角形(图中编号3)。这是因为第二三角形的顶部边界透明。
单击D时，单击第一个三
浏览 13提问于2022-09-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
