css怎么写出这样的空心菱形

Posted 2023-04-24

css怎么写出这样的空心菱形

参考技术A

用css实现:

<style>
    .diamond
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid blue;
        transform: rotate(45deg);
    
</style>
<div class="diamond"></div>

用svg实现:

<svg viewBox="0 0 100 100" width="20" height="20">
    <polygon points="10 50, 50 10, 90 50, 50 90" fill="none" stroke="blue" stroke-width="10" />
</svg>

本回答被提问者和网友采纳 参考技术B 感觉你应该画两个三角形，然后拼在一起 参考技术C css3中有图形变换，可以看一下

for循环输出空心菱形的形状java

使用for循环语句输出以下“空心菱形”效果：

    *
   * *
  *   *
 *     *
*       *
 *     * 
  *   *
   * *
    *

 建议优先参考笔者的另一篇文章：《for循环输出菱形的形状【java】》

代码：

 1 /*
 2     *
 3    * *
 4   *   *
 5  *     *
 6 *       *
 7  *     * 
 8   *   *
 9    * *
10     *
11 
12 分析：
13 上图形似于实心菱形
14     *
15    ***
16   *****
17  *******
18 *********
19  ******* 
20   *****
21    ***
22     *
23 
24     在菱形图案基础之上，将每行的第一颗和最后一颗星星输出，其他星星使用空格输出即可。
25 */
26 
27 
28 public class StarTree
29 {
30     public static void main(String[] args){
31         int layer = 5;
32 
33         // 一、上层（显示 layer 行）
34         for(int i=1;i<=layer;i++){
35              
36             // 1、获取空格需要显示数量
37             int spaceNum = layer-i; 
38 
39             for(int j=1;j<=spaceNum;j++){  // 需要打印空格的数量
40                 System.out.print(" ");
41             }
42             
43             // 2、获取星星需要显示的数量
44             int starNum = 2*i-1;
45 
46             for(int j=1;j<=starNum;j++){ // 需要每行打印的数量
47                 if(j==1||j==starNum){    // 每行第一颗和最后一颗星星打印
48                     System.out.print("*");
49                 }else{                   // 每行非第一颗和非最后一颗星星打印成空格
50                     System.out.print(" ");
51                 }
52             }
53             // 3、换行
54             System.out.println();
55         }
56         
57         // 二、下层
58         for(int i=(layer-1);i>=1;i--){
59 
60             int sapceNum = layer-i;      // 获取到每行显示空格的数量与行数i之间的关系
61             for(int j=1;j<=sapceNum;j++){
62                 System.out.print(" ");
63             }
64 
65             int starNum = 2*i-1;         // 获取到每行显示星星的数量与行数i之间的关系
66             for(int j=1;j<=starNum;j++){
67                 if(j==1||j==starNum){    // 每行第一颗和最后一颗星星打印
68                     System.out.print("*");
69                 }else{                   // 每行非第一颗和非最后一颗星星打印成空格
70                     System.out.print(" ");
71                 }
72             }
73             System.out.println();
74         }
75     }
76 }

  代码结果显示：