bozzysadmb
/
ISCS_Ui_Admin_Base


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒转房屋线条</title>
  <style>
    .house {
      position: relative;
      width: 200px; /* 正方形的宽度 */
      height: 200px; /* 正方形的高度 */
      background-color: #f0f0f0; /* 正方形的颜色 */
    }

    .house::after {
      content: '';
      position: absolute;
      top: 100%; /* 从正方形底部开始 */
      left: 50%;
      transform: translateX(-50%);
      border-left: 100px solid transparent; /* 左边透明边 */
      border-right: 100px solid transparent; /* 右边透明边 */
      border-top: 100px solid #f0f0f0; /* 上边为倒立三角形的底边 */
    }
  </style>
</head>
<body>
<div class="house">

</div>
</body>
</html>


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--  <meta charset="UTF-8">-->
<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--  <title>Enhanced Button Selection</title>-->
<!--  <style>-->
<!--    canvas {-->
<!--      border: 1px solid #000;-->
<!--      display: block;-->
<!--      margin: 0 auto;-->
<!--    }-->
<!--  </style>-->
<!--</head>-->
<!--<body>-->
<!--<canvas id="buttonCanvas" width="480" height="360"></canvas>-->

<!--<script>-->
<!--  const canvas = document.getElementById('buttonCanvas');-->
<!--  const ctx = canvas.getContext('2d');-->

<!--  const buttonWidth = 100;-->
<!--  const buttonHeight = 100;-->
<!--  const padding = 10;-->

<!--  const rows = 3;-->
<!--  const cols = 4;-->

<!--  const images = [-->
<!--    'https://via.placeholder.com/100/FF0000/FFFFFF?text=Red',-->
<!--    'https://via.placeholder.com/100/0000FF/FFFFFF?text=Blue',-->
<!--    'https://via.placeholder.com/100/00FF00/FFFFFF?text=Green',-->
<!--    'https://via.placeholder.com/100/FFFFFF/000000?text=White',-->
<!--    'https://via.placeholder.com/100/FFAA00/FFFFFF?text=Orange',-->
<!--    'https://via.placeholder.com/100/AAAAAA/FFFFFF?text=Gray',-->
<!--    'https://via.placeholder.com/100/FF00FF/FFFFFF?text=Magenta',-->
<!--    'https://via.placeholder.com/100/00FFFF/FFFFFF?text=Cyan',-->
<!--    'https://via.placeholder.com/100/FFFF00/FFFFFF?text=Yellow',-->
<!--    'https://via.placeholder.com/100/000000/FFFFFF?text=Black',-->
<!--    'https://via.placeholder.com/100/FF7777/FFFFFF?text=Pink',-->
<!--    'https://via.placeholder.com/100/7777FF/FFFFFF?text=Purple',-->
<!--  ];-->

<!--  let buttons = [];-->
<!--  let selectedButtons = new Set();-->

<!--  function loadImages(imageUrls, callback) {-->
<!--    const loadedImages = [];-->
<!--    let imagesToLoad = imageUrls.length;-->

<!--    imageUrls.forEach((url, index) => {-->
<!--      const img = new Image();-->
<!--      img.src = url;-->
<!--      img.onload = () => {-->
<!--        loadedImages[index] = img;-->
<!--        imagesToLoad&#45;&#45;;-->
<!--        if (imagesToLoad === 0) callback(loadedImages);-->
<!--      };-->
<!--    });-->
<!--  }-->

<!--  function createButtons(images) {-->
<!--    let x, y;-->
<!--    for (let row = 0; row < rows; row++) {-->
<!--      for (let col = 0; col < cols; col++) {-->
<!--        const index = row * cols + col;-->
<!--        x = col * (buttonWidth + padding);-->
<!--        y = row * (buttonHeight + padding);-->
<!--        buttons.push({ x, y, width: buttonWidth, height: buttonHeight, image: images[index], id: index });-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  function drawButtons() {-->
<!--    ctx.clearRect(0, 0, canvas.width, canvas.height);-->
<!--    buttons.forEach(button => {-->
<!--      // 绘制按钮图片-->
<!--      ctx.drawImage(button.image, button.x, button.y, button.width, button.height);-->

<!--      if (selectedButtons.has(button.id)) {-->
<!--        // 绘制半透明灰色遮罩-->
<!--        ctx.fillStyle = 'rgba(50, 50, 50, 0.5)';-->
<!--        ctx.fillRect(button.x, button.y, button.width, button.height);-->

<!--        // 绘制白色对勾图标-->
<!--        ctx.fillStyle = 'white';-->
<!--        ctx.font = '20px Arial';-->
<!--        ctx.textAlign = 'center';-->
<!--        ctx.textBaseline = 'middle';-->
<!--        ctx.fillText('✔', button.x + button.width / 2, button.y + button.height / 2);-->

<!--        // 添加边框-->
<!--        ctx.strokeStyle = 'black';-->
<!--        ctx.lineWidth = 5;-->
<!--        ctx.strokeRect(button.x, button.y, button.width, button.height);-->
<!--      }-->
<!--    });-->
<!--  }-->

<!--  function handleCanvasClick(event) {-->
<!--    const rect = canvas.getBoundingClientRect();-->
<!--    const mouseX = event.clientX - rect.left;-->
<!--    const mouseY = event.clientY - rect.top;-->

<!--    buttons.forEach(button => {-->
<!--      if (-->
<!--        mouseX >= button.x &&-->
<!--        mouseX <= button.x + button.width &&-->
<!--        mouseY >= button.y &&-->
<!--        mouseY <= button.y + button.height-->
<!--      ) {-->
<!--        if (selectedButtons.has(button.id)) {-->
<!--          selectedButtons.delete(button.id); // 取消选中-->
<!--        } else {-->
<!--          selectedButtons.add(button.id); // 选中按钮-->
<!--        }-->
<!--        drawButtons();-->
<!--      }-->
<!--    });-->
<!--  }-->

<!--  canvas.addEventListener('click', handleCanvasClick);-->

<!--  loadImages(images, loadedImages => {-->
<!--    createButtons(loadedImages);-->
<!--    drawButtons();-->
<!--  });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->