html文本框中画个三角,word三角形文本框

http://www.itjxue.com  2023-01-12 22:49  来源:未知  点击次数: 

html的div隐藏层显示格式里面,怎么加一个三角形的向下箭头意思是告诉大家可以点击后里面有内容?

做两站图片,一个三角向下指,一个三角向上指,在鼠标移上去的时候,替换另一张图片,离开时在换回来

如何使用HTML&CSS写一个三角形

div style="width:200px; height:174px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); text-align:center; line-height:300px; color:#fff; background-color:red"等边三角形/div

div style="width:200px; height:100px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); text-align:center; line-height:175px; color:#fff; background-color:red"等腰直角三角形/div

怎样用html或css制作三角形

只设置border三个方向的值,另一个方向就会汇聚成一个点,就出现三角形了,希望对你有帮助,望采纳!

#triangle-left {

????width: 0;

????height: 0;

????border-top: 50px solid transparent;

????border-right: 100px solid red;

????border-bottom: 50px solid transparent;

}

下面是个示例:

html中怎样做一个三角形边框

!doctype html

html lang="en"

head

? ? meta charset="UTF-8"

? ? titleDocument/title

/head

body

style

? ? body,html{

? ? ? ? width:100%;

? ? ? ? height:100%;

? ? ? ? margin:0;

? ? ? ? text-align:center;

? ? ? ? background: #FFF;

? ? }

? ? .triangle_shap{

? ? ? ? width:0;

? ? ? ? height:0;

? ? ? ? ?border-top:200px solid #ff630e;

? ? ? ? border-left:200px solid transparent;

? ? ? ? border-right:200px solid transparent;

? ? ? ? border-bottom: none;

? ? ? ? position: absolute;

? ? ? ? top:50%;

? ? ? ? left:50%;

? ? ? ? margin-left: -200px;

? ? ? ? margin-top: -141.42135623730950488016887242097px;

? ? }

? ? .triangle_core{

? ? ? ? width:0;

? ? ? ? height:0;

? ? ? ? ?border-top:150px solid #FFF;

? ? ? ? border-left:150px solid transparent;

? ? ? ? border-right:150px solid transparent;

? ? ? ? border-bottom: none;

? ? ? ? position: absolute;

? ? ? ? top:0;

? ? ? ? left:0;

? ? ? ? margin-left: -150px;

? ? ? ? margin-top: -180px;

? ? }

span{

? ? position: absolute;

? ? top:0;

? ? left:0;

? ? margin-top: -150px;

? ? margin-left: -10px;

? ? color: #ff630e;

? ? font-weight: bold;

? ? font-family: "微软雅黑";

}

/style?

body ?

div class="triangle_shap"

? ? div class="triangle_core"

? ? ? ? span了定当我I主吧/span

? ? /div

/div

/body

/html

下面的HTML代码,我能看懂每个快的意思,但不能理解整体,, 为什么会出现一个三角形的图案那?

(以左三角箭头为例:)关键就两句话:

一个是#menu a:hover span {border:solid 10px #fff;}

一个是 #menu a:hover span.left {border-left-color:#c00;}

解释起来有点困难,你想象一下,一个正方形,按照对角线折叠。就会有四个三角形,其中左边的被涂成了红色,另外的三块被涂成了白色。结果就是你做看到的,一个三角行的图案。

如果不是很明白,按照下面的css替换相应的内容:

#menu a:hover span {

display:block;

position:absolute;

height:10px; /*高度为10px, 然后将其逐渐缩小*/

width:10px; /*宽度为10px, 然后将其逐渐缩小*/

border:solid 8px #bbb;

top:4px;

overflow:hidden;

}

再看看效果你就明白了。

希望对你有所帮助,谢谢。。。

求助 怎么在html中弄出上下小三角按钮

找一个这样的图片 当然你也可以自己画,然后image就可以了啊

如果我的回答没能帮助您,请继续追问。

题不易,互相理解,您的采纳是我前进的动力。

您也可以向我们团队发出请求,会有更专业的人来为您解答。

(责任编辑:IT教学网)

更多

推荐Fireworks教程文章