Question

我正在尝试制作一个看起来像这样的div。

SceneDelegate

.triangle-area {
  width: 100%;
  height: 150px;
}

.triangle1 {
  width: 100%;
  height: 50px;
  border-width: 50px 50px 0 50px;
  border-color: red transparent transparent transparent;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.triangle2 {
  width: 50px;
  height: 150px;
  border-width: 50px 50px 50px 0;
  right: 0;
  border-color: transparent blue transparent transparent;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.triangle3 {
  width: 100%;
  height: 50px;
  border-width: 0 50px 50px 50px;
  bottom: 0;
  border-color: transparent transparent green transparent;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.triangle4 {
  width: 50px;
  height: 150px;
  border-width: 50px 0 50px 50px;
  border-color: transparent transparent transparent yellow;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

但是如何让每个边界线的透明部分不互相重叠呢？我需要将每个三角形div都设置为带有悬停的按钮，当我向其添加悬停时，它将为整个边界线着色，而不仅仅是着色部分。

Answer 1

如果可以接受可点击的图像，则可以使用地图：（为简单起见，我只添加了黄色区域）

<img src="https://i.stack.imgur.com/cHJNY.png" usemap="#my-links">
<map name="my-links">
  <area id="yellow" shape="polygon" coords="0,0,50,50,50,100,0,150" href="https://www.teamtrees.org/">
</map>

Answer 2

您只需为每个div添加一个具有hover属性的样式，例如：

.triangle1:hover {
  border-color: orange;
}

如果要为其提供更复杂的功能，则必须添加一个id并使用javascript控制它

Answer 3

我希望您尝试更改每个单个彩色边框的颜色，并使div的透明边框保持原样透明。然后您要使其可单击或在其上添加一些功能或事件。

如果是，那么您可以尝试在CSS中添加此代码...

/* to change the red color to grey on hover */
.triangle1:hover {
  border-color: grey transparent transparent transparent;
}

/* to change the blue color to grey on hover*/
.triangle2:hover {
  border-color: transparent blue transparent transparent;
}
/* to change the green color to grey on hover*/
.triangle3:hover {
  border-color: transparent transparent green transparent;
}
/* to change the yellow color to grey on hover*/
.triangle4:hover {
  border-color: transparent transparent transparent yellow;
}

然后，如果要向其onclick添加事件或函数。然后添加 id 以在javascript上使用它。或直接添加onclick函数。

Answer 4

为此使用import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; class WeightChart extends StatefulWidget { @override _WeightChartState createState() => _WeightChartState(); } class _WeightChartState extends State<WeightChart> { dynamic data; Future<dynamic> getData() async { final DocumentReference document = Firestore.instance.collection("listofprods").document('ac1'); await document.get().then<dynamic>(( DocumentSnapshot snapshot) async{ setState(() { data =snapshot.data; }); }); } @override void initState() { super.initState(); getData(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Weight'), ), body: Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Container( decoration: BoxDecoration( border: Border.all(color: Colors.black) ), child: ListTile( title: Text(data['name']),//here error ), ) ] ) ), ); } }。这是一个可以响应的基本概念：

clip-path

.container {
  margin:20px;
  width:300px;
  height:100px;
  position:relative;
}
.container > div:nth-child(1),
.container > div:nth-child(2){
   position:absolute;
   height:25%;
   top:0;
   left:0;
   right:0;
   background:red;
   clip-path:polygon(0 0, 100% 0,80% 100%,20% 100%);
}
.container > div:nth-child(2) {
  bottom:0;
  top:auto;
  transform:scaleY(-1);
  background:blue;
}

.container > div:nth-child(3),
.container > div:nth-child(4){
   position:absolute;
   width:20%;
   left:0;
   top:0;
   bottom:0;
   background:green;
   clip-path:polygon(0 0, 100% 25%,100% 75%,0 100%);
}
.container > div:nth-child(4) {
  right:0;
  left:auto;
  transform:scaleX(-1);
  background:purple;
}

.container > div:hover {
  filter:grayscale(100%);
}

如果要保持元素的宽度/高度相同，可以如下更新：

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.container {
  margin:20px;
  height:200px;
  position:relative;
}
.container > div:nth-child(1),
.container > div:nth-child(2){
   position:absolute;
   height:50px;
   top:0;
   left:0;
   right:0;
   background:red;
   clip-path:polygon(0 0, 100% 0,calc(100% - 50px) 100%,50px 100%);
}
.container > div:nth-child(2) {
  bottom:0;
  top:auto;
  transform:scaleY(-1);
  background:blue;
}

.container > div:nth-child(3),
.container > div:nth-child(4){
   position:absolute;
   width:50px;
   left:0;
   top:0;
   bottom:0;
   background:green;
   clip-path:polygon(0 0, 100% 50px,100% calc(100% - 50px),0 100%);
}
.container > div:nth-child(4) {
  right:0;
  left:auto;
  transform:scaleX(-1);
  background:purple;
}

.container > div:hover {
  filter:grayscale(100%);
}

CSS：边界线的透明部分

4 个答案: