CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-04 10:08:382663검색
먼저 삼각형을 만드는 방법에 대해 이야기하겠습니다. 웹사이트를 방문하면 탐색 표시줄에 몇 가지 삼각형이 표시될 것입니다. 예:
NetEase의 헤더 메뉴 표시줄에 있습니다. 홈페이지에도 이런 삼각형이 있을 겁니다
마우스가 넘어가면 삼각형이 수직으로 뒤집히는데 아래와 같이
지금은 테두리를 주로 활용하여 삼각형 만드는 방법을 공유합니다
우선 4개의 삼각형을 합쳐서 정사각형, 즉 정사각형의 네 개의 테두리가 합쳐져 형성된 4개의 삼각형입니다
소스코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方形</title>
<style>
.p{
width: 0px;
height: 0px;
border-top:50px solid red;
border-bottom:50px solid green;
border-left:50px solid yellow;
border-right:50px solid blue;
/*注意：四条边框的宽度必须相同！*/
}
</style>
</head>
<body>
<p class="p"></p>
</body>
</html>효과는 다음과 같습니다.
자, 테이크 아웃 삼각형 중 하나를 제거하려면 실제로 다른 하나를 제거해야 합니다.
소스 코드 숨기기:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作三角形箭头</title>
<style>
.arrow{
width:0;
height:0;
border-top:50px solid #000; /*设置并显示上边框*/
border-bottom:none; /*不设置下边框*/
border-left:50px solid transparent; /*设置但隐藏左边框*/
border-right:50px solid transparent; /*设置但隐藏右边框*/
}
.arrow:hover{
border-top:none; /*鼠标经过时，不设置上边框*/
border-bottom:50px solid #000; /*鼠标经过时，设置并显示下边框*/
}
</style>
</head>
<body>
<p class="arrow"></p>
</body>
</html>
효과는 다음과 같습니다.
다음으로 버튼 방식을 공유하겠습니다
주로 보더 스타일, 박스 섀도우, 의사 클래스 효과를 이용해 구현합니다.
소스코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作按钮</title>
<style type="text/css">
.btn{
width:100px;
height:100px;
background:#ccc;
border-radius:50%;
box-shadow:5px 5px 10px #000; /*设置外阴影*/
}
.btn:active{
background:#bbb;
box-shadow:5px 5px 10px #000 inset; /*设置内阴影*/
}
.btn p{
font-size:30px;
font-family:"微软雅黑";
color:blue;
float:left;
margin-top:28px;
margin-left:20px;
}
</style>
</head>
<body>
<p class="btn">
<a href="###">
<p>开始</p>
</a>
</p>
</body>
</html>
효과:
효과가 아름답지 않을 수도 있고 개선이 필요할 수도 있습니다. 모두가 자신의 능력을 발휘할 수 있습니다. 상상력을 발휘하여 더 나은 결과를 얻으시기 바랍니다.
CSS를 사용하여 삼각형과 버튼을 만드는 위의 간단한 예는 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.
CSS로 삼각형과 버튼을 만드는 간단한 예제에 대한 자세한 예는 PHP 중국어 웹사이트에서 관련 기사를 주목해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：캔버스에 만화경 효과를 구현한 예다음 기사：캔버스에 만화경 효과를 구현한 예