css习题(如何用html和css画三角形(等边和直角))

用HTML语言和css语言画一个等边三角形和一个直角三角形

以下是HTML页面的代码:

<html>
  <head>
      <meta charst="utf-8"> 
      <title>中国的流浪猫title>
      <link rel="stylesheet" type="text/css" href="sss.css">
  head>
    <body>

    	<div class="wapper">div>

    body>
html>

以下是css页面的代码:
这是画等边三角形的第一个方法

*{
     
	margin: 0;
	padding: 0;
}
.wapper{
     
    width: 0;
    height: 0;
    border: 100px solid red;
    border-bottom-color: black;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

这是画等边三角形的第二个方法

.wapper{
     
    width: 0;
	border-right: 200px solid #fff;
	border-top: 200px solid #fff;
	border-left: 200px solid #fff;
	border-bottom: 200px solid red;	
}

这是画等边三角的第三个方法(最简的代码)

 .wappper {
     
            width: 0;
            border: 100px solid transparent;
            border-top-color: red;
        }

这是画一个直角等边三角形的css代码:





    
    
    中国的流浪猫
    



    

这是一个画直角不等边三角形的方法:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国的流浪猫title>
    <style>
        body {
      
            background-color: #ccc;
        }

        div {
      
            margin: 100px auto;
            width: 0;
            height: 0;
            border-width: 0 0 150px 50px;
            border-style: solid;
            border-color: transparent transparent red transparent;
        }
    style>
head>

<body>
    <div>div>
body>

html>

你可能感兴趣的:(html,css)